/* Aplicar tipografías */

      body {

        font-family: 'Poppins', sans-serif;

        color: #333;

      }

      h1, h2, h3, h4, h5, h6 {

        font-family: 'Montserrat', sans-serif;

        font-weight: 700;

      }

      .lead {

        font-family: 'Poppins', sans-serif;

        font-weight: 500;

      }

      /* Colores y estilos minimalistas */

      :root {

        --primary-color: #2E86C1;

        --secondary-color: #E67E22;

        --background-color: #F8F9FA;

        --text-color: #333;

      }

      .navbar {

        background-color: var(--primary-color);

      }

      .btn-primary {

        background-color: var(--primary-color);

        border: none;

      }

      .btn-secondary {

        background-color: #f73f0b;

        border: none;

      }

      /* Animaciones sutiles */

      .animate-on-scroll {

        opacity: 0;

        transform: translateY(20px);

        transition: opacity 0.6s ease-out, transform 0.6s ease-out;

      }

      .animate-on-scroll.visible {

        opacity: 1;

        transform: translateY(0);

      }

      /* Mejoras en secciones */

      section {

        padding: 80px 0;

      }

      .benefit-card {

        transition: transform 0.3s ease, box-shadow 0.3s ease;

      }

      .benefit-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

      }

  





/*<!-- Estilos Premium para la Navbar -->*/

 

    /* Fondo y estructura general */

      .magic-nav {

        background: linear-gradient(135deg, #1a2a3a, #2c3e50);

        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

        padding: 15px 0;

        position: relative;

        z-index: 1000;

      }

      

      /* Logo con efecto brillo */

      .magic-logo {

        position: relative;

        transition: transform 0.3s ease;

      }

      

      .logo-glow {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%);

        opacity: 0;

        transition: opacity 0.5s ease;

        border-radius: 50%;

        transform: scale(0.95);

      }

      

      .magic-logo:hover {

        transform: translateY(-2px);

      }

      

      .magic-logo:hover .logo-glow {

        opacity: 0.6;

      }

      

      /* Botón móvil moderno */

      .magic-toggler {

        border: none;

        padding: 8px;

        position: relative;

        overflow: hidden;

      }

      

      .magic-toggler:focus {

        box-shadow: none;

      }

      

      .toggler-wave {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 20px;

        height: 20px;

        background: rgba(255,255,255,0.2);

        border-radius: 50%;

        transform: translate(-50%, -50%) scale(0);

        opacity: 0;

        transition: transform 0.3s, opacity 0.3s;

      }

      

      .magic-toggler.active .toggler-wave {

        transform: translate(-50%, -50%) scale(3);

        opacity: 1;

      }

      

      /* Enlaces del menú con efecto subrayado animado */

      .magic-link {

        position: relative;

        padding: 8px 15px !important;

        margin: 0 5px;

        color: #ecf0f1 !important;

        transition: all 0.3s ease;

      }

      

      .link-text {

        position: relative;

        z-index: 1;

        transition: transform 0.3s ease;

      }

      

      .link-underline {

        position: absolute;

        bottom: 5px;

        left: 15px;

        width: 0;

        height: 2px;

        background: linear-gradient(90deg, #3498db, #2ecc71);

        transition: width 0.3s ease, left 0.3s ease;

      }

      

      .magic-link:hover .link-text {

        transform: translateY(-2px);

      }

      

      .magic-link:hover .link-underline {

        width: calc(100% - 30px);

      }

      

      .magic-link.active .link-underline {

        width: calc(100% - 30px);

        background: #e74c3c;

      }

      

      /* Ícono de acceso premium */

      .nav-access {

        margin-left: 15px;

        position: relative;

      }

      

      .magic-access {

        background: rgba(255,255,255,0.1);

        border-radius: 50px;

        padding: 8px 15px 8px 40px !important;

        position: relative;

        overflow: hidden;

        transition: all 0.3s ease;

      }

      

      .access-icon {

        position: absolute;

        left: 15px;

        top: 50%;

        transform: translateY(-50%);

        font-size: 1.2rem;

        color: #f1c40f;

        transition: all 0.3s ease;

      }

      

    

      

      .access-pulse {

        position: absolute;

        top: 50%;

        left: 13px;

        width: 20px;

        height: 20px;

        background: rgba(241, 196, 15, 0.3);

        border-radius: 50%;

        transform: translateY(-50%) scale(0);

        opacity: 0;

      }

      

      .magic-access:hover {

        background: rgba(255,255,255,0.15);

        transform: translateY(-2px);

      }

      

      .magic-access:hover .access-icon {

        transform: translateY(-50%) rotate(10deg);

      }

      

      .magic-access:hover .access-tooltip {

        opacity: 1;

        visibility: visible;

        top: -40px;

      }

      

      .magic-access:hover .access-pulse {

        animation: pulse 1.5s infinite;

      }

      

      @keyframes pulse {

        0% { transform: translateY(-50%) scale(0.8); opacity: 0.6; }

        70% { transform: translateY(-50%) scale(1.3); opacity: 0; }

        100% { transform: translateY(-50%) scale(1.3); opacity: 0; }

      }

      

      /* Efecto para móviles */

      @media (max-width: 991px) {

        .magic-menu {

          padding-top: 15px;

        }

        

        .magic-link {

          margin: 5px 0 !important;

          padding: 10px 15px !important;

        }

        

        .link-underline {

          bottom: 0;

          left: 0;

        }

        

        .magic-link:hover .link-underline,

        .magic-link.active .link-underline {

          width: 100%;

        }

        

        .nav-access {

          margin: 15px 0 0 0;

        }

        

        .magic-access {

          display: inline-block;

          padding: 10px 20px 10px 45px !important;

        }

        

        .access-tooltip {

          top: auto;

          bottom: -35px;

          left: 50%;

        }

        

        .magic-access:hover .access-tooltip {

          top: auto;

          bottom: -45px;

        }

      }

    

  



  /*<!-- Estilos para el Carrusel Mágico -->*/

 

    /* Contenedor principal */

      .magic-carousel {

        position: relative;

        overflow: hidden;

        border-radius: 15px;

        box-shadow: 0 15px 30px rgba(0,0,0,0.2);

      }

      

      /* Símbolos matemáticos flotantes */

      .math-symbols-container {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 2;

      }

      

      .math-symbol {

        position: absolute;

        font-size: 2.5rem;

        font-weight: bold;

        color: rgba(255,255,255,0.15);

        animation-duration: 12s;

        animation-iteration-count: infinite;

        animation-timing-function: ease-in-out;

      }

      

      .floating {

        animation-name: floating-math;

      }

      

      .floating-delay {

        animation-name: floating-math;

        animation-delay: 3s;

      }

      

      @keyframes floating-math {

        0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }

        10% { opacity: 0.15; }

        50% { transform: translate(50px, 30px) rotate(180deg); }

        100% { transform: translate(0, 0) rotate(360deg); opacity: 0; }

      }

      

      /* Posicionamiento de los símbolos */

      .math-symbol:nth-child(1) { top: 10%; left: 5%; }

      .math-symbol:nth-child(2) { top: 25%; right: 10%; }

      .math-symbol:nth-child(3) { top: 40%; left: 15%; }

      .math-symbol:nth-child(4) { top: 65%; right: 8%; }

      .math-symbol:nth-child(5) { top: 80%; left: 20%; }

      .math-symbol:nth-child(6) { top: 55%; right: 15%; }

      .math-symbol:nth-child(7) { top: 30%; left: 80%; }

      .math-symbol:nth-child(8) { top: 70%; left: 70%; }

      

      /* Imágenes del carrusel */

      .carousel-item {

        height: 500px; /* Ajusta según necesites */

      }

      

      .carousel-item img {

        object-fit: cover;

        height: 100%;

        width: 100%;

        filter: brightness(0.8);

      }

      

      /* Textos descriptivos */

      .magic-caption {

        bottom: 25%;

        text-align: left;

        left: 10%;

        right: auto;

        max-width: 500px;

        padding: 30px;

        background: rgba(46, 134, 193, 0.7);

        border-radius: 10px;

        backdrop-filter: blur(5px);

      }

      

      .magic-caption h3 {

        font-size: 2.5rem;

        font-weight: 700;

        text-shadow: 1px 1px 3px rgba(0,0,0,0.3);

      }

      

      .magic-caption p {

        font-size: 1.2rem;

        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

      }

      

      /* Controles personalizados */

      .magic-control-prev,

      .magic-control-next {

        width: 60px;

        height: 60px;

        background: rgba(255,255,255,0.2);

        border: none;

        border-radius: 50%;

        top: 50%;

        transform: translateY(-50%);

        backdrop-filter: blur(5px);

        transition: all 0.3s ease;

      }

      

      .magic-control-prev { left: 30px; }

      .magic-control-next { right: 30px; }

      

      .magic-control-prev:hover,

      .magic-control-next:hover {

        background: rgba(46, 134, 193, 0.8);

        transform: translateY(-50%) scale(1.1);

      }

      

      .magic-control-prev i,

      .magic-control-next i {

        font-size: 1.8rem;

        color: white;

      }

      

      /* Indicadores personalizados */

      .magic-indicators {

        bottom: 20px;

      }

      

      .magic-indicators button {

        width: 12px;

        height: 12px;

        border-radius: 50%;

        border: 2px solid white;

        background: transparent;

        margin: 0 8px;

        transition: all 0.3s ease;

      }

      

      .magic-indicators .active {
        background: #ecef6b;
        transform: scale(1.0);
      }

      

      /* Efectos de animación */

      .carousel-item {

        transition: transform 1s ease, opacity .5s ease;

      }

      

      /* Responsive */

      @media (max-width: 768px) {

        .carousel-item {

          height: 400px;

        }

        

        .magic-caption {

          bottom: 15%;

          left: 5%;

          padding: 20px;

        }

        

        .magic-caption h3 {

          font-size: 1.8rem;

        }

        

        .magic-caption p {

          font-size: 1rem;

        }

        

        .magic-control-prev,

        .magic-control-next {

          width: 50px;

          height: 50px;

        }

      }

    

  





/*<!-- CSS Mágico -->*/

 

    /* Efecto de estrellas matemáticas */

      .shooting-stars {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 1;

      }

      .shooting-stars .star {

        position: absolute;

        top: -20px;

        left: var(--x);

        font-size: 1.5rem;

        opacity: 0;

        animation: shooting-star 6s linear infinite;

        animation-delay: var(--delay);

        color: rgba(230, 126, 34, 0.7);

      }

      

      /* Título con gradiente y brillo */

      .magic-title {

        position: relative;

        display: inline-block;

        margin-bottom: 0.5rem;

      }

      .title-gradient {

        background: linear-gradient(45deg, #E67E22, #F1C40F);

        -webkit-background-clip: text;

        background-clip: text;

        color: transparent;

        display: inline-block;

      }

      .title-sparkle {

        position: absolute;

        right: -25px;

        top: -15px;

        font-size: 1.5rem;

        animation: sparkle 2s infinite alternate;

      }

      .title-underline {

        width: 150px;

        height: 4px;

        background: linear-gradient(90deg, #E67E22, #F39C12);

        margin: 0 auto;

        border-radius: 2px;

        animation: underline-pulse 3s infinite;

      }

      

      /* Efecto máquina de escribir */

      .typewriter-text {

        overflow: hidden;

        white-space: nowrap;

        border-right: 3px solid #E67E22;

        animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;

      }

      

      /* Botones mágicos */

      .magic-btn {

        position: relative;

        overflow: hidden;

        transition: all 0.3s;

        border: none;

        font-weight: 600;

        box-shadow: 0 4px 15px rgba(0,0,0,0.1);

      }

      .hover-grow:hover {

        transform: scale(1.05);

        box-shadow: 0 8px 25px rgba(230, 126, 34, 0.3);

      }

      .bubble-btn:hover {

        animation: bubble 0.6s ease-out;

      }

      .energy-btn {

        background: linear-gradient(45deg, #E67E22, #F39C12);

        color: white;

      }

      .energy-btn:hover {

        background: linear-gradient(45deg, #F39C12, #E67E22);

        animation: energy-pulse 1.5s infinite;

      }

      

      /* Ábaco flotante */

      .floating-abacus {

        position: relative;

        display: inline-block;

      }

      .abacus-icon {

        font-size: 4rem;

        animation: float 4s ease-in-out infinite;

      }

      .abacus-glow {

        position: absolute;

        width: 60px;

        height: 60px;

        background: radial-gradient(circle, rgba(230,126,34,0.4) 0%, rgba(230,126,34,0) 70%);

        border-radius: 50%;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        animation: pulse 2s infinite;

      }

      

      /* Wave divider */

      .wave-divider {

        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        height: 100px;

      }

      .wave-divider svg {

        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        height: 100%;

      }

      

      /* Animaciones */

      @keyframes shooting-star {

        0% { transform: translateY(0) translateX(0); opacity: 0; }

        10% { opacity: 1; }

        100% { transform: translateY(100vh) translateX(20px); opacity: 0; }

      }

      

      @keyframes sparkle {

        0% { transform: scale(1); opacity: 0.7; }

        100% { transform: scale(1.3); opacity: 1; }

      }

      

      @keyframes underline-pulse {

        0%, 100% { transform: scaleX(1); opacity: 0.8; }

        50% { transform: scaleX(1.1); opacity: 1; }

      }

      

      @keyframes typing {

        from { width: 0 }

        to { width: 100% }

      }

      

      @keyframes blink-caret {

        from, to { border-color: transparent }

        50% { border-color: #E67E22; }

      }

      

      @keyframes bubble {

        0% { transform: scale(1); }

        50% { transform: scale(1.1); }

        100% { transform: scale(1); }

      }

      

      @keyframes energy-pulse {

        0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.7); }

        70% { box-shadow: 0 0 0 15px rgba(230, 126, 34, 0); }

        100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); }

      }

      

      @keyframes float {

        0%, 100% { transform: translateY(0); }

        50% { transform: translateY(-15px); }

      }

      

      @keyframes pulse {

        0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; }

        70% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }

        100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; }

      }

    

  

/*<!-- CSS Mágico (deberías llevarlo a tu hoja de estilos) -->*/

 

    .magic-underline {

        position: relative;

        display: inline-block;

      }

      .magic-underline:after {

        content: '';

        position: absolute;

        width: 100%;

        height: 4px;

        bottom: -5px;

        left: 0;

        background: linear-gradient(90deg, #2E86C1, #4eccff);

        border-radius: 2px;

        animation: underline-glow 2s infinite alternate;

      }

      

      .magic-card {

        transition: transform 0.3s, box-shadow 0.3s;

        border: 1px solid rgba(46, 134, 193, 0.2);

      }

      .magic-card:hover {

        transform: translateY(-5px);

        box-shadow: 0 10px 20px rgba(46, 134, 193, 0.15);

      }

      

      .magic-feature {

        position: relative;

        padding-left: 40px;

      }

      .magic-icon {

        position: absolute;

        left: 0;

        top: 0;

        font-size: 24px;

        background: #2E86C1;

        color: white;

        width: 32px;

        height: 32px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

      }

      

      .highlight-text {

        background: linear-gradient(120deg, #dfaa02 0%, #f73a03 100%);

        -webkit-background-clip: text;

        background-clip: text;

        color: transparent;

        font-weight: bold;

      }

      

      .magic-text {

        background: linear-gradient(120deg, #0a66fb 0%, #0fb3ff 100%);

        -webkit-background-clip: text;

        background-clip: text;

        color: transparent;

        font-weight: bold;

      }

      

      .magic-video-container {

        position: relative;

        

      }

      .magic-video-frame {

        border-radius: 12px;

        overflow: hidden;

        box-shadow: 0 8px 25px rgba(46, 134, 193, 0.3);

        border: 3px solid white;

        transition: transform 0.3s;

      }

      .magic-video-frame:hover {

        transform: scale(1.02);

      }

      

      .video-sparkles .sparkle {

        position: absolute;

        background: #fff;

        border-radius: 50%;

        pointer-events: none;

        animation: sparkle-fly 3s linear infinite;

      }

      

      .floating-testimonial {

        background: white;

        box-shadow: 0 5px 15px rgba(0,0,0,0.1);

        max-width: 300px;

        margin-left: auto;

        animation: float 6s ease-in-out infinite;

        border: 1px solid #e3f2fd;

      }

      

      .abacus-particles {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 1;

      }

      .abacus-particles .particle-plus {

        position: absolute;

        font-size: 24px;

        opacity: 0.3;

        animation: float 5s ease-in-out infinite;

      }

      

      /* Animaciones */

      @keyframes underline-glow {

        0% { opacity: 0.7; }

        100% { opacity: 1; }

      }

      

      @keyframes float {

        0%, 100% { transform: translateY(0); }

        50% { transform: translateY(-10px); }

      }

      

      @keyframes sparkle-fly {

        0% { transform: translate(0, 0); opacity: 0; }

        10% { opacity: 1; }

        100% { transform: translate(100px, -50px); opacity: 0; }

      }

    

  



  /*<!-- Estilos Mágicos Mejorados -->*/

 

    /* Partículas matemáticas mejoradas */

      .math-particles {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 1;

        overflow: hidden;

      }

      .particle {

        position: absolute;

        font-size: 1.8rem;

        font-weight: bold;

        color: rgba(44, 62, 80, 0.2);

        animation: float 6s ease-in-out infinite;

        opacity: 0.7;

        transition: all 0.5s;

      }

      .particle:hover {

        color: rgba(44, 62, 80, 0.5);

        transform: scale(1.5);

      }

      

      /* Pizarra virtual mejorada */

      .virtual-board {

        position: absolute;

        background: #2C3E50;

        border-radius: 10px;

        transform: rotate(3deg);

        box-shadow: 0 15px 40px rgba(0,0,0,0.3);

        display: flex;

        align-items: center;

        justify-content: center;

        z-index: 2;

        animation: board-float 8s ease-in-out infinite;

      }

      .board-content {

        width: 90%;

        height: 90%;

        border: 2px dashed rgba(255,255,255,0.3);

        border-radius: 5px;

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        overflow: hidden;

      }

      .equation {

        color: white;

        font-size: 2.2rem;

        font-family: 'Courier New', monospace;

        font-weight: bold;

        text-shadow: 0 2px 4px rgba(0,0,0,0.3);

        position: relative;

        z-index: 2;

      }

      .chalk-effect {

        position: absolute;

        width: 100%;

        height: 100%;

        background: repeating-linear-gradient(

          to bottom,

          transparent,

          transparent 2px,

          rgba(255,255,255,0.05) 2px,

          rgba(255,255,255,0.05) 4px

        );

        z-index: 1;

      }

      

      

      /* Círculos de números animados */

      .step-number-circle {

        width: 50px;

        height: 50px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 1.8rem;

        font-weight: bold;

        color: white;

        margin-right: 15px;

        box-shadow: 0 4px 10px rgba(0,0,0,0.2);

        position: relative;

      }

      .blue-pulse {

        background: #3498db;

        animation: pulse 2s infinite, float 4s ease-in-out infinite;

      }

      .green-pulse {

        background: #2ecc71;

        animation: pulse 2s infinite 0.3s, float 4s ease-in-out infinite 0.3s;

      }

      .orange-pulse {

        background: #e67e22;

        animation: pulse 2s infinite 0.6s, float 4s ease-in-out infinite 0.6s;

      }

      

      /* Tarjetas de pasos mejoradas */

      .step-card {

        background: white;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0,0,0,0.15);

        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

        height: 100%;

        position: relative;

        z-index: 3;

        cursor: context-menu;

      }

      .step-card:hover {

        transform: translateY(-15px) scale(1.02);

        box-shadow: 0 20px 40px rgba(0,0,0,0.2);

      }

      

      .step-header {

        display: flex;

        align-items: center;

        padding: 25px 20px;

        position: relative;

      }

      .step-icon {

        background: #F1C40F;

        width: 80px;

        height: 80px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 8px 20px rgba(0,0,0,0.15);

        transition: all 0.3s;

      }

      .step-card:hover .step-icon {

        transform: rotate(10deg) scale(1.1);

      }

      

      .step-body {

        padding: 0 25px 25px;

        position: relative;

      }

      .step-body h3 {

        color: #2C3E50;

        margin-bottom: 15px;

        font-size: 1.5rem;

      }

      

      .step-details {

        height: 0;

        overflow: hidden;

        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

      }

      .step-card:hover .step-details {

        height: 160px;

      }

      

      .step-wave {

        position: absolute;

        bottom: 0;

        left: 0;

        width: 100%;

        height: 8px;

        background: linear-gradient(90deg, #F1C40F, #F39C12);

        opacity: 0;

        transition: all 0.4s;

      }

      .step-card:hover .step-wave {

        opacity: 1;

        height: 10px;

      }

      

      /* Animaciones mejoradas */

      @keyframes float {

        0%, 100% { transform: translateY(0) rotate(0deg); }

        50% { transform: translateY(-15px) rotate(2deg); }

      }

      

      @keyframes board-float {

        0%, 100% { transform: translateY(0) rotate(3deg); }

        50% { transform: translateY(-20px) rotate(5deg); }

      }

      

      @keyframes pulse {

        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }

        50% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(0,0,0,0); }

        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0); }

      }

      

      @keyframes equation-change {

        0%, 30% { content: "5 + 3 = 8"; }

        35%, 65% { content: "12 × 2 = 24"; }

        70%, 100% { content: "50 ÷ 5 = 10"; }

      }

      

      @keyframes underline-grow {

        0% { width: 0; left: 50%; }

        100% { width: 50%; left: 25%; }

      }

      

      @keyframes scroll-wheel {

        0% { transform: translateX(-50%) translateY(0); opacity: 1; }

        100% { transform: translateX(-50%) translateY(10px); opacity: 0; }

      }

    

  



  /*<!-- Estilos Neuro-Matemáticos -->*/

 

    /* Mascota CerebroX */

      .cerebrox-mascot {

        position: absolute;

        top: 4%;

        left: 4%;

        width: 130px;

        z-index: 2;

        animation: floating-brain 6s ease-in-out infinite;

      }

      .brain-waves {

        position: absolute;

        width: 200%;

        height: 200%;

        top: -50%;

        left: -50%;

        background: radial-gradient(circle, rgba(46,134,193,0.1) 0%, rgba(46,134,193,0) 70%);

        border-radius: 50%;

        animation: brain-pulse 3s infinite;

      }

      

      /* Efecto de neuronas */

      .neuron-connections {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 1;

      }

      .neuron {

        position: absolute;

        width: 10px;

        height: 10px;

        background: #2E86C1;

        border-radius: 50%;

        filter: blur(1px);

      }

      .neuron:nth-child(1) {

        top: 20%;

        left: 15%;

        animation: neuron-glow 2s infinite alternate;

      }

      .neuron:nth-child(2) {

        top: 70%;

        left: 80%;

        animation: neuron-glow 2s 0.5s infinite alternate;

      }

      .neuron:nth-child(3) {

        top: 40%;

        left: 90%;

        animation: neuron-glow 2s 1s infinite alternate;

      }

      

      /* Tarjetas de beneficios */

      .neuro-benefit-card {

        background: white;

        border-radius: 15px;

        padding: 20px;

        text-align: center;

        height: 100%;

        box-shadow: 0 5px 15px rgba(0,0,0,0.05);

        transition: all 0.3s;

        position: relative;

        overflow: hidden;

        border: 1px solid rgba(46, 134, 193, 0.1);

      }

      .neuro-benefit-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 15px 30px rgba(46, 134, 193, 0.15);

      }

      

      .benefit-icon {

        position: relative;

        height: 80px;

        margin-bottom: 15px;

        display: flex;

        align-items: center;

        justify-content: center;

      }

      .benefit-icon img {

        max-height: 60px;

        transition: all 0.3s;

        z-index: 2;

      }

      .neuro-benefit-card:hover .benefit-icon img {

        transform: scale(1.1);

      }

      .brain-glow {

        position: absolute;

        width: 60px;

        height: 60px;

        background: radial-gradient(circle, rgba(230,126,34,0.2) 0%, rgba(230,126,34,0) 70%);

        border-radius: 50%;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        opacity: 0;

        transition: all 0.3s;

      }

      .neuro-benefit-card:hover .brain-glow {

        opacity: 1;

        width: 80px;

        height: 80px;

      }

      

      .neuro-benefit-card h4 {

        color: #2E86C1;

        margin-bottom: 15px;

        font-weight: 600;

      }

      

      .benefit-description {

        height: 0;

        overflow: hidden;

        transition: all 0.5s ease;

        opacity: 0;

      }

      .neuro-benefit-card:hover .benefit-description {

        height: auto;

        opacity: 1;

        margin-top: 15px;

      }

      

      .skill-meter {

        width: 100%;

        height: 8px;

        background: #f0f0f0;

        border-radius: 4px;

        margin-top: 10px;

        overflow: hidden;

      }

      .skill-level {

        height: 100%;

        background: linear-gradient(90deg, #E67E22, #F39C12);

        border-radius: 4px;

        transition: width 1s ease;

      }

      

      /* Animaciones */

      @keyframes floating-brain {

        0%, 100% { transform: translateY(0) rotate(-5deg); }

        50% { transform: translateY(-20px) rotate(5deg); }

      }

      

      @keyframes brain-pulse {

        0% { transform: scale(0.8); opacity: 0.5; }

        100% { transform: scale(1.2); opacity: 0; }

      }

      

      @keyframes neuron-glow {

        0% { box-shadow: 0 0 5px #2E86C1; }

        100% { box-shadow: 0 0 15px #2E86C1; }

      }

    

  



  /*<!-- Estilos Mágicos -->*/

 

    /* Efecto de números flotantes */

      .floating-numbers {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 1;

      }

      .floating-numbers span {

        position: absolute;

        font-size: 1.5rem;

        font-weight: bold;

        color: rgb(46 134 193 / 36%);

        animation: float 6s ease-in-out infinite;

      }

      

      /* Mascota Abaquin */

      .abaquin-mascot {

        position: absolute;

        top: 35%;

        right: 5%;

        width: 120px;

        z-index: 2;

        animation: floating-abaquin 8s ease-in-out infinite;

      }

      .abaquin-trail {

        position: absolute;

        bottom: -20px;

        left: 50%;

        width: 40px;

        height: 10px;

        background: radial-gradient(ellipse at center, rgba(46,134,193,0.3) 0%, rgba(46,134,193,0) 80%);

        border-radius: 50%;

        filter: blur(3px);

        transform: translateX(-50%);

        animation: trail-pulse 2s infinite alternate;

      }

      

      /* Título con símbolos matemáticos */

      .magic-underline {

        position: relative;

      }

      .magic-underline:after {

        content: '';

        position: absolute;

        width: 100%;

        height: 3px;

        bottom: -5px;

        left: 0;

        background: linear-gradient(90deg, #2E86C1, #4eccff);

        border-radius: 2px;

      }

      .math-symbols {

        display: inline-flex;

        gap: 10px;

        margin-left: 15px;

      }

      .math-symbols span {

        color: #2E86C1;

        font-size: 1.2rem;

        animation: bounce 2s infinite;

      }

      .math-symbols span:nth-child(1) { animation-delay: 0s; }

      .math-symbols span:nth-child(2) { animation-delay: 0.5s; }

      .math-symbols span:nth-child(3) { animation-delay: 1s; }

      .math-symbols span:nth-child(4) { animation-delay: 1.5s; }

      

      /* Tarjetas de niveles */

      .level-card {

        height: 100%;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0,0,0,0.1);

        transition: transform 0.3s;

        display: flex;

        flex-direction: column;

      }

      .level-card:hover {

        transform: translateY(-10px);

      }

      

      .schoolers {

        background: linear-gradient(135deg, #2E86C1 0%, #5DADE2 100%);

        color: white;

      }

      

      .juniors {

        background: linear-gradient(135deg, #28B463 0%, #58D68D 100%);

        color: white;

      }

      

      .level-content {

        display: flex;

        padding: 25px;

        flex-grow: 1;

      }

      

      .level-info {

        flex: 1;

        padding-right: 20px;

      }

      

      .level-image {

        flex: 1;

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

      }

      .level-image img {

        max-height: 180px;

        transition: transform 0.3s;

      }

      .level-card:hover .level-image img {

        transform: scale(1.05);

      }

      .math-glow {

        position: absolute;

        width: 100%;

        height: 100%;

        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);

        top: 0;

        left: 0;

        z-index: 0;

      }

      

      .age-badge {

        display: inline-block;

        background: rgba(255,255,255,0.2);

        padding: 3px 12px;

        border-radius: 20px;

        margin: 10px 0;

        font-weight: 500;

      }

      

      .level-features {

        list-style: none;

        padding: 0;

        margin: 20px 0;

      }

      .level-features li {

        margin-bottom: 10px;

        position: relative;

        padding-left: 25px;

      }

      .math-icon {

        position: absolute;

        left: 0;

        top: 0;

        font-weight: bold;

      }

      

      .btn-math {

        background: rgba(255,255,255,0.2);

        border: none;

        border-radius: 0;

        color: white;

        padding: 12px;

        width: 100%;

        font-weight: 600;

        transition: all 0.3s;

      }

      .btn-math:hover {

        background: rgba(255,255,255,0.3);

      }

      

      /* Animaciones */

      @keyframes float {

        0%, 100% { transform: translateY(0) rotate(0deg); }

        50% { transform: translateY(-20px) rotate(5deg); }

      }

      

      @keyframes floating-abaquin {

        0%, 100% { transform: translateY(0) rotate(-5deg); }

        50% { transform: translateY(-20px) rotate(5deg); }

      }

      

      @keyframes trail-pulse {

        0% { opacity: 0.3; transform: translateX(-50%) scale(0.8); }

        100% { opacity: 0.7; transform: translateX(-50%) scale(1.2); }

      }

      

      @keyframes bounce {

        0%, 100% { transform: translateY(0); }

        50% { transform: translateY(-10px); }

      }

    

  



   /*<!-- Estilos profesores -->*/

 

    /* Estilos principales con prefijo prof- */

.prof-bg-gradient {

  background: linear-gradient(to bottom, #D6EAF8, #ffffff);

  position: relative;

  overflow: hidden;

}



.prof-py-5 {

  padding: 5rem 0;

}



.prof-position-relative {

  position: relative;

}



.prof-container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 15px;

  position: relative;

  z-index: 2;

  cursor: context-menu;



  

}



.prof-text-center {

  text-align: center;

}



.prof-mb-5 {

  margin-bottom: 3rem;

}



.prof-mb-4 {

  margin-bottom: 2rem;

}



.prof-row {

  display: flex;

  flex-wrap: wrap;

  margin: 0 -15px;

}



.prof-justify-center {

  justify-content: center;

}



.prof-col-md-4 {

  width: 33.333%;

  padding: 0 15px;

}



/* Símbolos flotantes de fondo */

.prof-math-bg-elements {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  pointer-events: none;

  z-index: 1;

}



.prof-math-element {

  position: absolute;

  font-size: 3rem;

  color: rgb(7 99 161 / 54%);

  font-weight: bold;

  animation: prof-float 8s infinite ease-in-out;

}



@keyframes prof-float {

  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.6; }

  50% { transform: translateY(-30px) rotate(180deg) scale(1.5); opacity: 0.1; }

}



/* Estilo del título */

.prof-section-title {

  color: #2E86C1;

  font-size: 2.2rem;

  display: inline-block;

  position: relative;

  padding-bottom: 15px;

  margin: 0;

}



.prof-title-line {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 80px;

  height: 4px;

  background: #2E86C1;

  border-radius: 2px;

  animation: prof-line-grow 1s ease-out forwards;

}



@keyframes prof-line-grow {

  from { width: 0; opacity: 0; }

  to { width: 80px; opacity: 1; }

}



/* Estilos de tarjetas */

.prof-card {

  background: white;

  border-radius: 15px;

  overflow: hidden;

  box-shadow: 0 8px 25px rgb(136 196 245 / 49%);

  transition: all 0.4s ease;

  height: 100%;

}



.prof-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.15);

}



.prof-img-container {

  position: relative;

  width: 200px;

  height: 200px;

  margin: 25px auto 20px;

  border-radius: 50%;

  overflow: hidden;

  border: 5px solid white;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.prof-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: all 0.4s ease;

}



.prof-card:hover .prof-img {

  transform: scale(1.08);

}



.prof-hover-aura {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: radial-gradient(circle, rgba(46,134,193,0.3) 0%, rgba(46,134,193,0) 70%);

  opacity: 0;

  transition: opacity 0.4s ease;

  border-radius: 50%;

}



.prof-card:hover .prof-hover-aura {

  opacity: 1;

  animation: prof-aura-pulse 3s infinite;

}



@keyframes prof-aura-pulse {

  0%, 100% { transform: scale(1); opacity: 0.8; }

  50% { transform: scale(1.1); opacity: 0.5; }

}



.prof-math-icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0);

  font-size: 2.5rem;

  color: white;

  font-weight: bold;

  opacity: 0;

  transition: all 0.4s ease;

  text-shadow: 0 2px 10px rgba(0,0,0,0.3);

}



.prof-card:hover .prof-math-icon {

  opacity: 0.9;

  transform: translate(-50%, -50%) scale(1) rotate(360deg);

}



.prof-info {

  padding: 20px;

  text-align: center;

}



.prof-name {

  color: #2C3E50;

  margin-bottom: 8px;

  font-size: 1.3rem;

}



.prof-role {

  color: #7F8C8D;

  font-size: 0.95rem;

  margin-bottom: 15px;

}



.prof-skills {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  padding: 0 10px 10px;

}



.prof-skill {

  display: inline-block;

  background: #2E86C1;

  color: white;

  padding: 5px 12px;

  border-radius: 20px;

  font-size: 0.8rem;

  transition: all 0.3s ease;

}



.prof-skill:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 8px rgba(46,134,193,0.3);

}



/* Animaciones al aparecer */

.prof-animate {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.6s ease-out;

}



.prof-visible {

  opacity: 1;

  transform: translateY(0);

}



/* Retrasos para animación escalonada */

[data-delay="0.2"] { transition-delay: 0.2s; }

[data-delay="0.4"] { transition-delay: 0.4s; }



/* Responsive */

@media (max-width: 768px) {

  .prof-col-md-4 {

    width: 100%;

    max-width: 350px;

    margin: 0 auto 2rem;

  }

  

  .prof-section-title {

    font-size: 1.8rem;

  }

  

  .prof-math-element {

    font-size: 2rem;

  }

  

  .prof-img-container {

    width: 180px;

    height: 180px;

  }

}



   /*<!-- Estilos Matemágicos 3D -->*/

 

    /* Fondo con símbolos matemáticos */

      .math-symbols-bg {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 1;

        overflow: hidden;

      }

      .math-symbols-bg .symbol {

        position: absolute;

        font-size: 2rem;

        color: rgb(19 148 179 / 86%);

        animation: float-symbol 15s linear infinite;

      }

      .math-symbols-bg .symbol:nth-child(1) { top: 15%; left: 5%; animation-delay: 0s; }

      .math-symbols-bg .symbol:nth-child(2) { top: 25%; right: 8%; animation-delay: 2s; }

      .math-symbols-bg .symbol:nth-child(3) { bottom: 30%; left: 10%; animation-delay: 4s; }

      .math-symbols-bg .symbol:nth-child(4) { bottom: 15%; right: 15%; animation-delay: 6s; }

      .math-symbols-bg .symbol:nth-child(5) { top: 40%; left: 20%; animation-delay: 8s; }

      .math-symbols-bg .symbol:nth-child(6) { top: 60%; right: 25%; animation-delay: 10s; }

    

      /* Destacado matemático */

      .math-highlight {

        background: linear-gradient(135deg, #2E86C1, #E67E22);

        -webkit-background-clip: text;

        background-clip: text;

        color: transparent;

        font-weight: bold;

      }

    

      /* Contenedor 3D */

      .testimonial-3d {

        perspective: 1000px;

        height: 100%;

      }

    

      /* Hexágono 3D */

      .testimonial-hexagon {

        width: 100%;

        height: 100%;

        position: relative;

        transform-style: preserve-3d;

        transition: transform 0.8s;

        transform: rotateY(0);

        min-height: 350px;

      }

      .testimonial-3d:hover .testimonial-hexagon {

        transform: rotateY(180deg);

      }

    

      /* Caras del hexágono */

      .hexagon-face, .hexagon-back {

        position: absolute;

        width: 100%;

        height: 100%;

        backface-visibility: hidden;

        border-radius: 15px;

        overflow: hidden;

        box-shadow: 0 10px 30px rgba(0,0,0,0.1);

        display: flex;

        flex-direction: column;

        align-items: center;

        padding: 20px;

        background: white;

      }

    

      .hexagon-back {

        transform: rotateY(180deg);

        color: white;

        justify-content: center;

        text-align: center;

      }

    

      /* Estructura hexagonal */

      .hexagon-img-container {

        width: 120px;

        height: 120px;

        margin: 0 auto 20px;

        position: relative;

        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

      }

      .hexagon-img {

        width: 100%;

        height: 100%;

        object-fit: cover;

      }

      .hexagon-overlay {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(135deg, rgba(46,134,193,0.3), rgba(230,126,34,0.3));

      }

    

      /* Contenido del testimonio */

      .hexagon-content {

        text-align: center;

        flex-grow: 1;

        display: flex;

        flex-direction: column;

        position: relative;

      }

      .hexagon-content p {

        font-style: italic;

        margin-bottom: 20px;

      }

      .stars {

        color: #F1C40F;

        margin-bottom: 15px;

        font-size: 1.2rem;

      }

    

      /* Icono matemático */

      .testimonial-math-icon {

        position: absolute;

        bottom: -15px;

        right: -15px;

        width: 60px;

        height: 60px;

        background: linear-gradient(135deg, #2E86C1, #E67E22);

        color: white;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 2rem;

        font-weight: bold;

        box-shadow: 0 5px 15px rgba(0,0,0,0.2);

        z-index: 2;

      }

    

      /* Datos matemáticos */

      .math-fact {

        margin-top: 20px;

      }

      .fact-value {

        display: block;

        font-size: 2.5rem;

        font-weight: bold;

        line-height: 1;

      }

      .fact-label {

        font-size: 0.9rem;

        opacity: 0.9;

      }

    

      /* Colores de hexágonos */

      .hex-blue .hexagon-overlay { background: linear-gradient(135deg, rgba(41,128,185,0.4), rgba(41,128,185,0.2)); }

      .hex-green .hexagon-overlay { background: linear-gradient(135deg, rgba(39,174,96,0.4), rgba(39,174,96,0.2)); }

      .hex-orange .hexagon-overlay { background: linear-gradient(135deg, rgba(231,76,60,0.4), rgba(231,76,60,0.2)); }

    

      /* Animaciones */

      @keyframes float-symbol {

        0% { transform: translateY(0) rotate(0deg); opacity: 0; }

        10% { opacity: 0.2; }

        100% { transform: translateY(-100vh) rotate(180deg); opacity: 0.5; }

      }

    

      @keyframes pulse-math {

        0%, 100% { transform: scale(1); }

        50% { transform: scale(1.1); }

      }

    

  



  /* Efectos matemáticos flotantes WhatsApp */

  .math-bg-elements-whatsapp {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

    z-index: 1;

    overflow: hidden;

  }

  

  .math-bg-elements-whatsapp .math-element-whatsapp {

    position: absolute;

    font-size: 1.8rem;

    color: rgb(74 195 247 / 54%);

    font-weight: bold;

    animation: float-math-whatsapp 15s infinite linear;

    opacity: 0.8;

    transition: all 0.5s;

  }

  

  /* Posiciones aleatorias para los símbolos */

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(1) { top: 15%; left: 5%; animation-duration: 18s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(2) { top: 25%; right: 10%; animation-duration: 22s; animation-delay: 2s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(3) { bottom: 30%; left: 15%; animation-duration: 16s; animation-delay: 1s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(4) { bottom: 20%; right: 3%; animation-duration: 20s; animation-delay: 3s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(5) { top: 70%; left: 5%; animation-duration: 14s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(6) { top: 40%; right: 7%; animation-duration: 19s; animation-delay: 2s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(7) { top: 60%; left: 84%; animation-duration: 17s; animation-delay: 1s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(8) { top: 30%; left: 9%; animation-duration: 21s; animation-delay: 3s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(9) { bottom: 5%; right: 16%; animation-duration: 13s; animation-delay: 2s; }

  .math-bg-elements-whatsapp .math-element-whatsapp:nth-child(10) { top: 10%; right: 15%; animation-duration: 18s; animation-delay: 1s; }



  /* Imagen de niño con ábaco */

  .abacus-kid-whatsapp {

    position: absolute;

    bottom: 10%;

    right: 5%;

    animation: float-math-whatsapp 8s infinite ease-in-out;

    opacity: 0.9;

    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));

  }

  

  .abacus-kid-whatsapp img {

    transition: all 0.5s;

  }

  

  .abacus-kid-whatsapp:hover img {

    transform: scale(1.1) rotate(5deg);

    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));

  }

  

  /* Tarjeta del formulario */

  .math-form-card-whatsapp {

    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0,0,0,0.1);

    transition: all 0.3s;

    position: relative;

    z-index: 2;

    border: 1px solid rgba(0,0,0,0.05);

  }

  

  .math-form-card-whatsapp:hover {

    box-shadow: 0 20px 50px rgba(0,0,0,0.15);

    transform: translateY(-5px);

  }

  

  /* Encabezado del formulario */

  .form-header-whatsapp {

    background: linear-gradient(135deg, #2E86C1, #4eccff);

    color: white;

    padding: 30px;

    text-align: center;

    position: relative;

    overflow: hidden;

  }

  

  .form-header-whatsapp h3 {

    font-weight: 700;

    margin-bottom: 5px;

    font-size: 1.8rem;

    position: relative;

    z-index: 2;

  }

  

  .form-header-whatsapp p {

    opacity: 0.9;

    margin-bottom: 0;

    position: relative;

    z-index: 2;

  }

  

  /* Cuerpo del formulario */

  .form-body-whatsapp {

    padding: 30px;

  }

  

  /* Estilos para labels siempre visibles */

  .always-visible-label-whatsapp {

    position: relative;

    margin-bottom: 2rem;

  }



  .always-visible-label-whatsapp .floating-label-whatsapp {

    position: absolute;

    top: -20px;

    left: 45px;

    color: #2E86C1;

    font-size: 0.9rem;

    transition: all 0.3s ease;

    background: transparent;

    padding: 0 5px;

    z-index: 2;

    pointer-events: none;

  }



  .always-visible-label-whatsapp .math-form-control-whatsapp {

    padding: 15px 20px 15px 45px;

    border: none;

    border-radius: 0;

    background: transparent;

    border-bottom: 2px solid #e9ecef;

    width: 100%;

    font-size: 1rem;

    color: #2C3E50;

  }



  .always-visible-label-whatsapp .math-icon-whatsapp {

    position: absolute;

    left: 15px;

    top: 15px;

    width: 25px;

    height: 25px;

    background: #2E86C1;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    z-index: 3;

  }



  .always-visible-label-whatsapp .input-underline-whatsapp {

    position: absolute;

    bottom: 0;

    left: 45px;

    width: 0;

    height: 2px;

    background: #2E86C1;

    transition: width 0.4s ease;

  }



  /* Efectos de enfoque */

  .always-visible-label-whatsapp .math-form-control-whatsapp:focus {

    outline: none;

    box-shadow: none;

    background-color: rgba(46, 134, 193, 0.05);

  }



  .always-visible-label-whatsapp .math-form-control-whatsapp:focus ~ .input-underline-whatsapp {

    width: calc(100% - 45px);

  }



  .always-visible-label-whatsapp .math-form-control-whatsapp:focus ~ .floating-label-whatsapp {

    color: #1a5276;

    font-weight: 600;

  }



  /* Estilo para select */

  select.math-form-control-whatsapp {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232E86C1' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 15px center;

    background-size: 12px;

  }

  

  /* Botón de envío */

  .math-submit-btn-whatsapp {

    width: 100%;

    padding: 15px;

    background: linear-gradient(135deg, #28B463, #58D68D);

    color: white;

    border: none;

    border-radius: 10px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    z-index: 1;

  }

  

  .math-submit-btn-whatsapp i {

    font-size: 1.3rem;

    transition: all 0.3s;

  }

  

  .btn-hover-effect-whatsapp {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: -100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);

    transition: all 0.6s;

    z-index: -1;

  }

  

  .math-submit-btn-whatsapp:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(40, 180, 99, 0.3);

  }

  

  .math-submit-btn-whatsapp:hover i {

    transform: scale(1.2);

  }

  

  .math-submit-btn-whatsapp:hover .btn-hover-effect-whatsapp {

    left: 100%;

  }

  

  /* Animaciones */

  @keyframes float-math-whatsapp {

    0%, 100% { transform: translateY(0) rotate(0deg); }

    50% { transform: translateY(-20px) rotate(5deg); }

  }

 

   

/*<!-- Estilos Mágicos para FAQ preguntas Sorobán -->*/

 

    

  /* === [BASE] === */

  :root {

    --turquoise: #1abc9c;

    --turquoise-dark: #16a085;

    --blue: #3498db;

    --blue-dark: #2980b9;

    --dark: #2c3e50;

  }



  /* === [EFECTOS VISUALES] === */

  .sorobanpreg-elements {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    pointer-events: none;

    z-index: 1;

  }

  

  .sorobanpreg-particle {

    position: absolute;

    font-size: 1.2rem;

    font-weight: bold;

    color: rgb(26 188 156 / 48%);

    animation: float 8s ease-in-out infinite;

  }

  

  .sorobanpreg-bead {

    position: absolute;

    width: 12px;

    height: 12px;

    background: var(--turquoise);

    border-radius: 50%;

    animation: bead-float 10s ease-in-out infinite;

    opacity: 0.6;

  }



  /* === [ACORDEÓN] === */

  .accordion-button {

    border-left: 4px solid var(--turquoise) !important;

    transition: all 0.3s ease;

  }

  

  .accordion-button:not(.collapsed) {

    background-color: rgba(26, 188, 156, 0.08) !important;

    color: var(--turquoise-dark) !important;

    box-shadow: none;

  }

  

  .accordion-button:focus {

    box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.1);

  }



  /* === [BADGES] === */

  .sorobanpreg-badge {

    width: 26px;

    height: 26px;

    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark)) !important;

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.85rem;

    font-weight: bold;

    animation: pulse 2s infinite;

  }



  /* === [RESPUESTAS] === */

  .sorobanpreg-answer {

    background: linear-gradient(90deg, #f9f9f9 0%, #f6fbfa 100%);

    border-left: 3px solid var(--turquoise);

    box-shadow: 0 2px 12px rgba(26, 188, 156, 0.08);

    animation: fadeInUp 0.4s ease-out;

  }

  

  .sorobanpreg-answer-decoration {

    position: absolute;

    top: 0;

    left: 0;

    width: 3px;

    height: 100%;

    background: linear-gradient(to bottom, var(--turquoise), var(--turquoise-dark));

  }



  /* === [TARJETAS] === */

  .sorobanpreg-class-card {

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    border: none;

    overflow: hidden;

  }

  

  .sorobanpreg-class-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 12px 24px rgba(0,0,0,0.1);

  }

  

  .sorobanpreg-option-card {

    transition: all 0.3s ease;

  }

  

  .sorobanpreg-option-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

  }



  .bg-gradient-turquoise {

    background: linear-gradient(135deg, var(--turquoise), var(--turquoise-dark));

  }

  

  .bg-gradient-blue {

    background: linear-gradient(135deg, var(--blue), var(--blue-dark));

  }

  

  .bg-gradient-dark {

    background: linear-gradient(135deg, #ff9400, #fd6004);

  }



  /* === [COLORES] === */

  .text-turquoise { color: var(--turquoise) !important; }

  .text-blue { color: var(--blue) !important; }

  .text-dark { color: #fe4b03 !important; }

  

  .bg-turquoise { background-color: var(--turquoise) !important; }

  .bg-blue { background-color: var(--blue) !important; }

  

  .bg-light-turquoise { background-color: rgba(26, 188, 156, 0.08) !important; }

  .bg-light-blue { background-color: rgba(52, 152, 219, 0.08) !important; }

  .bg-light-dark { background-color: rgba(44, 62, 80, 0.08) !important; }

  

  .border-turquoise { border-color: var(--turquoise) !important; }

  .border-blue { border-color: var(--blue) !important; }

  .border-dark { border-color: var(--dark) !important; }



  /* === [COMPONENTES] === */

  .sorobanpreg-timeline {

    position: relative;

    padding-left: 2rem;

  }

  

  .sorobanpreg-timeline:before {

    content: "";

    position: absolute;

    left: 1rem;

    top: 0;

    bottom: 0;

    width: 2px;

    background: linear-gradient(to bottom, var(--turquoise), var(--blue));

  }

  

  .timeline-item {

    position: relative;

    margin-bottom: 1.5rem;

  }

  

  .timeline-badge {

    position: absolute;

    left: -2rem;

    top: 0;

    width: 2rem;

    height: 2rem;

    border-radius: 50%;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: bold;

    z-index: 2;

  }

  

  .timeline-content {

    padding-left: 1.5rem;

    transition: all 0.3s ease;

  }

  

  .timeline-content:hover {

    transform: translateX(5px);

  }



  /* === [LISTAS] === */

  .sorobanpreg-feature-list {

    list-style: none;

    padding-left: 0;

  }

  

  .sorobanpreg-feature-list li {

    padding: 0.5rem 0;

    position: relative;

    padding-left: 2rem;

  }

  

  .sorobanpreg-feature-list li i {

    position: absolute;

    left: 0;

    top: 0.6rem;

  }



  /* === [ICONOS] === */

  .sorobanpreg-icon {

    display: inline-block;

    animation: float 4s ease-in-out infinite;

  }

  

  .sorobanpreg-icon-lg {

    font-size: 2rem;

  }

  

  .sorobanpreg-mini-icon {

    font-size: 1.25rem;

  }

  

  .sorobanpreg-class-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  /* === [BOTONES] === */

  .btn-outline-white {

    border: 1px solid rgba(255,255,255,0.5);

    color: white;

    background: transparent;

    transition: all 0.3s ease;

  }

  

  .btn-outline-white:hover {

    background: rgba(255,255,255,0.15);

    color: white;

  }



  /* === [ANIMACIONES] === */

  @keyframes float {

    0%, 100% { transform: translateY(0) rotate(0deg); }

    50% { transform: translateY(-5px) rotate(2deg); }

  }

  

  @keyframes bead-float {

    0%, 100% { transform: translate(0, 0); }

    25% { transform: translate(8px, -8px); }

    50% { transform: translate(-4px, 4px); }

    75% { transform: translate(-8px, -4px); }

  }

  

  @keyframes pulse {

    0%, 100% { transform: scale(1); opacity: 1; }

    50% { transform: scale(1.1); opacity: 0.9; }

  }

  

  @keyframes fadeInUp {

    from { opacity: 0; transform: translateY(15px); }

    to { opacity: 1; transform: translateY(0); }

  }



  /* === [UTILIDADES] === */

  .text-white-80 { color: rgba(255,255,255,0.8) !important; }

  .border-white-20 { border-color: rgba(255,255,255,0.2) !important; }

  .translate-middle-y { transform: translateY(-30%) !important; }



  /*<!-- Estilos Programa por Niveles Mágicos Completos -->*/

 

    /* Animaciones Matemáticas de Fondo */

      .math-background-elements {

        position: absolute;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

        pointer-events: none;

        z-index: 0;

        overflow: hidden;

      }

      

      .math-symbol-nivel {

        font-size: 1.8rem;

        opacity: 0.5;

        color: #FF5722;

        position: absolute;

        font-weight: bold;

        animation-duration: 8s;

        animation-iteration-count: infinite;

        animation-timing-function: ease-in-out;

        z-index: 0;

      }

      

      .floating-nivel {

        animation-name: floating-math;

      }

      

      .floating-delay-nivel {

        animation-name: floating-math;

        animation-delay: 2s;

      }

      

      @keyframes floating-math {

        0% { transform: translate(0, 0) rotate(0deg); }

        25% { transform: translate(10px, 15px) rotate(5deg); }

        50% { transform: translate(20px, 5px) rotate(0deg); }

        75% { transform: translate(10px, 15px) rotate(-5deg); }

        100% { transform: translate(0, 0) rotate(0deg); }

      }



       /* Posicionamiento de los símbolos */

      .math-symbol-nivel:nth-child(1) { top: 10%; left: 5%; }

      .math-symbol-nivel:nth-child(2) { top: 16%; right: 10%; }

      .math-symbol-nivel:nth-child(3) { top: 5%; left: 15%; }

      .math-symbol-nivel:nth-child(4) { top: 8%; right: 19%; }

      .math-symbol-nivel:nth-child(5) { top: 82%; left: 16%; }

      .math-symbol-nivel:nth-child(6) { top: 85%; right: 15%; }

      .math-symbol-nivel:nth-child(7) { top: 90%; left: 83%; }

      

      

      /* Títulos Mágicos */

      .magic-title {

        position: relative;

        display: inline-block;

        background: linear-gradient(90deg, #2E86C1, #28B463, #F1C40F);

        -webkit-background-clip: text;

        background-clip: text;

        color: transparent;

        animation: gradient-shift 6s ease infinite;

        background-size: 200% auto;

      }

      

      .math-connector {

        position: absolute;

        bottom: -8px;

        left: 0;

        width: 100%;

        height: 3px;

        background: linear-gradient(90deg, #2E86C1, #28B463, #F1C40F);

        border-radius: 3px;

        animation: gradient-shift 6s ease infinite;

        background-size: 200% auto;

      }

      

      .magic-subtitle {

        position: relative;

        display: inline-block;

      }

      

      .math-dots-connector {

        position: absolute;

        width: 120px;

        height: 15px;

        background: radial-gradient(circle, #2E86C1 2px, transparent 3px);

        background-size: 15px 15px;

        opacity: 0.3;

        left: 50%;

        transform: translateX(-50%);

        bottom: -10px;

      }

      

      @keyframes gradient-shift {

        0% { background-position: 0% center; }

        50% { background-position: 100% center; }

        100% { background-position: 0% center; }

      }

      

      /* Pestañas Mágicas */

      .magic-tabs .nav-link {

        border-radius: 50px;

        padding: 8px 20px;

        margin: 0 5px;

        border: 2px solid transparent;

        transition: all 0.3s ease;

        position: relative;

        overflow: hidden;

      }

      

      .magic-tabs .nav-link.active {

        background: linear-gradient(135deg, #2E86C1, #28B463);

        color: white;

        border-color: #2E86C1;

        box-shadow: 0 4px 15px rgba(46, 134, 193, 0.3);

        transform: translateY(-2px);

      }

      

      .magic-tabs .nav-link:not(.active):hover {

        border-color: #2E86C1;

        transform: translateY(-2px);

      }

      

      .math-badge {

        display: inline-block;

        width: 22px;

        height: 22px;

        background: white;

        border-radius: 50%;

        color: #2E86C1;

        font-weight: bold;

        margin-left: 8px;

        line-height: 22px;

        text-align: center;

        font-size: 0.8rem;

        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

      }

      

      /* Tarjetas Mágicas */

      .magic-card {

        border-radius: 15px;

        overflow: hidden;

        position: relative;

        z-index: 1;

        transition: all 0.4s ease;

      }

      

      .magic-card:before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(135deg, rgba(46, 134, 193, 0.05), rgba(40, 180, 99, 0.05));

        z-index: -1;

      }

      

      .magic-level-badge {

        font-size: 1.1rem;

        padding: 8px 15px;

        border-radius: 50px;

        box-shadow: 0 4px 8px rgba(0,0,0,0.1);

      }

      

      .magic-cycle-badge, .magic-time-badge {

        font-size: 0.8rem;

        padding: 5px 10px;

        border-radius: 50px;

      }

      

      /* Barras de Progreso Mágicas */

      .magic-master-progress {

        border-radius: 50px;

        overflow: hidden;

        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);

      }

      

      .progress-bar-animated {

        position: relative;

        overflow: hidden;

      }

      

      .progress-bar-animated:after {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: linear-gradient(

          90deg,

          rgba(255,255,255,0) 0%,

          rgba(255,255,255,0.3) 50%,

          rgba(255,255,255,0) 100%

        );

        animation: progress-shine 2s infinite;

      }

      

      .magic-remaining-bar {

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 0.8rem;

        font-weight: bold;

        letter-spacing: 0.5px;

      }

      

      @keyframes progress-shine {

        0% { transform: translateX(-100%); }

        100% { transform: translateX(100%); }

      }

      

      /* Tarjetas de Ciclos Mágicas */

      .magic-cycle-card {

        border-radius: 12px;

        transition: all 0.3s ease, transform 0.2s ease;

        cursor: pointer;

        position: relative;

        overflow: hidden;

      }

      

      .magic-cycle-card:before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));

        z-index: 0;

      }

      

      .magic-cycle-card.completed {

        box-shadow: 0 5px 15px rgba(40, 180, 99, 0.2);

      }

      

      .magic-cycle-card.in-progress {

        box-shadow: 0 5px 15px rgba(46, 134, 193, 0.2);

      }

      

      .magic-cycle-card.upcoming {

        box-shadow: 0 5px 15px rgba(241, 196, 15, 0.2);

      }

      

      .magic-cycle-card.locked {

        box-shadow: 0 5px 15px rgba(108, 117, 125, 0.1);

      }

      

      .magic-cycle-card:hover {

        transform: translateY(-5px) scale(1.02);

        box-shadow: 0 10px 25px rgba(0,0,0,0.15);

      }

      

      .magic-cycle-card.compact {

        min-height: 120px;

      }

      

      .magic-cycle-number {

        font-size: 0.75rem;

        padding: 4px 10px;

        letter-spacing: 0.5px;

      }

      

      .magic-cycle-title {

        font-size: 1.1rem;

        margin-bottom: 10px;

        position: relative;

        display: inline-block;

      }

      

      .magic-cycle-list {

        list-style: none;

        padding-left: 0;

      }

      

      .magic-cycle-list li {

        margin-bottom: 5px;

        position: relative;

        padding-left: 25px;

      }

      

      .magic-cycle-list li i {

        position: absolute;

        left: 0;

        top: 3px;

      }

      

      .magic-unlock-text {

        font-style: italic;

        font-size: 0.8rem;

      }

      

      .magic-lock-icon {

        color: #6c757d;

      }

      

      .magic-mini-progress {

        border-radius: 5px;

        overflow: hidden;

      }

      

      .math-placeholder-animation {

        width: 100%;

        height: 60px;

        background: 

          linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);

        background-size: 200% 100%;

        animation: placeholder-shine 1.5s infinite linear;

        border-radius: 8px;

        margin-top: 10px;

      }

      

      @keyframes placeholder-shine {

        0% { background-position: 200% 0; }

        100% { background-position: -200% 0; }

      }

      

      /* Leyenda Mágica */

      .magic-legend-card {

        border-radius: 15px;

        background: linear-gradient(135deg, #f8f9fa, #ffffff);

        box-shadow: 0 5px 20px rgba(0,0,0,0.08);

        border: none;

      }

      

      .magic-filter-btn {

        border-radius: 50px;

        padding: 5px 15px;

        margin: 0 5px;

        transition: all 0.3s ease;

        border-width: 2px;

      }

      

      .magic-filter-btn.active {

        font-weight: bold;

        transform: translateY(-2px);

        box-shadow: 0 4px 8px rgba(0,0,0,0.1);

      }

      

      .magic-filter-btn[data-filter="completed"].active {

        background: linear-gradient(135deg, #28B463, #58D68D);

        color: white;

        border-color: #28B463;

      }

      

      .magic-filter-btn[data-filter="progress"].active {

        background: linear-gradient(135deg, #2E86C1, #5DADE2);

        color: white;

        border-color: #2E86C1;

      }

      

      .magic-filter-btn[data-filter="locked"].active {

        background: linear-gradient(135deg, #6c757d, #95a5a6);

        color: white;

        border-color: #6c757d;

      }

      

      .color-box {

        width: 18px;

        height: 18px;

        border-radius: 4px;

        display: inline-block;

        box-shadow: 0 2px 3px rgba(0,0,0,0.1);

      }

      

      /* Tabla Mágica */

      .magic-table {

        border-radius: 10px;

        overflow: hidden;

      }

      

      .magic-table-header {

        background: linear-gradient(135deg, #e74c3c, #c0392b);

        color: white;

      }

      

      .magic-table-row {

        transition: all 0.2s ease;

      }

      

      .magic-table-row:hover {

        background-color: #f8f9fa;

        transform: translateX(5px);

      }

      

      .magic-highlight-row {

        font-weight: bold;

        background-color: #fcf3cf;

      }

      

      /* Efectos Especiales */

      .magic-details-btn {

        border-radius: 50px;

        padding: 3px 12px;

        font-size: 0.8rem;

        transition: all 0.3s ease;

      }

      

      .magic-details-btn:hover {

        transform: translateY(-2px);

        box-shadow: 0 4px 8px rgba(0,0,0,0.1);

      }

      

      /* Responsive Adjustments */

      @media (max-width: 768px) {

        .magic-tabs .nav-link {

          padding: 6px 12px;

          font-size: 0.9rem;

          margin: 3px;

        }

        

        .magic-cycle-card.compact {

          min-height: 100px;

        }

        

        .magic-filter-btn {

          padding: 3px 10px;

          font-size: 0.8rem;

          margin: 0 3px;

        }

      }

    

  



  /*<!-- footer -->*/

 

  :root {

  --footer-blue: #3a86ff;

  --footer-orange: #ff6b35;

  --footer-green: #06d6a0;

  --footer-yellow: #ffd166;

  --footer-white: #ffffff;

  --footer-dark: #1a1a2e;

  --footer-light: #f8f9fa;

}



.footer-container {

  position: relative;

  background: linear-gradient(135deg, var(--footer-dark), #16213e);

  color: var(--footer-white);

  font-family: 'Poppins', sans-serif;

  overflow: hidden;

  padding-top: 3rem;

}



.footer-particles {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  z-index: 1;

}



.footer-particle {

  position: absolute;

  color: rgba(255, 255, 255, 0.15);

  font-size: 1.5rem;

  font-weight: bold;

  animation: footer-vapor-animation 15s linear infinite;

  opacity: 0;

  text-shadow: 0 0 10px currentColor;

}



@keyframes footer-vapor-animation {

  0% {

    transform: translateY(100vh) translateX(0) rotate(0deg) scale(1);

    opacity: 0;

    text-shadow: 0 0 0 currentColor;

  }

  10% {

    opacity: 0.5;

    text-shadow: 0 0 10px currentColor;

  }

  70% {

    opacity: 0.5;

  }

  100% {

    transform: translateY(-100px) translateX(20px) rotate(180deg) scale(1.5);

    opacity: 0;

    text-shadow: 0 0 20px currentColor;

  }

}



.footer-content {

  position: relative;

  z-index: 2;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 2rem;

  margin-bottom: 2rem;

}



.footer-section-title {

  position: relative;

  font-size: 1.5rem;

  margin-bottom: 1.5rem;

  display: inline-block;

  color: var(--footer-yellow);

}



.footer-title-underline {

  position: absolute;

  bottom: -8px;

  left: 0;

  width: 50%;

  height: 3px;

  background: var(--footer-orange);

  transform-origin: left;

  transform: scaleX(0);

  transition: transform 0.3s ease;

}



.footer-section-title:hover .footer-title-underline {

  transform: scaleX(1);

}



/* Formulario de contacto */

.footer-form {

  margin-top: 1.5rem;

}



.footer-form-group {

  position: relative;

  margin-bottom: 1.5rem;

}



.footer-form-group input,

.footer-form-group textarea {

  width: 100%;

  padding: 0.5rem 0;

  background: transparent;

  border: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  color: var(--footer-white);

  font-size: 1rem;

}



.footer-form-group textarea {

  resize: vertical;

  min-height: 100px;

}



.footer-form-label {

  position: absolute;

  top: 0.5rem;

  left: 0;

  pointer-events: none;

  transition: all 0.3s ease;

  color: rgba(255, 255, 255, 0.7);

  display: flex;

}



.footer-label-char {

  display: inline-block;

  transition: all 0.3s ease;

}



.footer-form-group input:focus + .footer-form-label .footer-label-char,

.footer-form-group input:not(:placeholder-shown) + .footer-form-label .footer-label-char,

.footer-form-group textarea:focus + .footer-form-label .footer-label-char,

.footer-form-group textarea:not(:placeholder-shown) + .footer-form-label .footer-label-char {

  transform: translateY(-1.5rem);

  color: var(--footer-blue);

}



.footer-input-line {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--footer-blue);

  transition: width 0.4s ease;

}



.footer-form-group input:focus ~ .footer-input-line,

.footer-form-group textarea:focus ~ .footer-input-line {

  width: 100%;

}



/* Botón futurístico */

.footer-btn {

  position: relative;

  background: linear-gradient(45deg, var(--footer-blue), var(--footer-green));

  color: var(--footer-white);

  border: none;

  padding: 0.75rem 1.5rem;

  border-radius: 50px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  overflow: hidden;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 4px 15px rgba(58, 134, 255, 0.3);

  z-index: 1;

}



.footer-btn-text {

  position: relative;

  z-index: 2;

  transition: transform 0.3s ease;

}



.footer-btn-icon {

  width: 1.2rem;

  height: 1.2rem;

  margin-left: 0.5rem;

  transform: translateX(-5px);

  opacity: 0;

  transition: all 0.3s ease;

}



.footer-send-icon {

  width: 100%;

  height: 100%;

  fill: var(--footer-white);

}



.footer-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 20px rgba(58, 134, 255, 0.4);

}



.footer-btn:hover .footer-btn-text {

  transform: translateX(-5px);

}



.footer-btn:hover .footer-btn-icon {

  transform: translateX(0);

  opacity: 1;

}



.footer-btn-hover {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background: linear-gradient(45deg, var(--footer-green), var(--footer-blue));

  opacity: 0;

  transition: opacity 0.3s ease;

  z-index: 1;

}



.footer-btn:hover .footer-btn-hover {

  opacity: 1;

}



/* Logo y información */

.footer-logo {

  display: flex;

  align-items: center;

  margin-bottom: 1.5rem;

}



.footer-logo-icon {

  width: 40px;

  height: 40px;

  margin-right: 1rem;

}



.footer-abacus-icon {

  width: 100%;

  height: 100%;

}



.footer-abacus-frame {

  fill: none;

  stroke: var(--footer-blue);

  stroke-width: 2;

}



.footer-abacus-bar {

  stroke: var(--footer-orange);

  stroke-width: 2;

}



.footer-abacus-bead {

  fill: var(--footer-yellow);

  stroke: var(--footer-orange);

  stroke-width: 1;

}



.footer-logo-text {

  font-size: 1.5rem;

  font-weight: 700;

  background: linear-gradient(45deg, var(--footer-blue), var(--footer-green));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.footer-slogan {

  font-style: italic;

  margin-bottom: 2rem;

  color: rgba(255, 255, 255, 0.8);

}



.footer-contact-info {

  margin-top: 2rem;

}



.footer-info-item {

  display: flex;

  align-items: center;

  margin-bottom: 1rem;

}



.footer-info-icon {

  width: 20px;

  height: 20px;

  margin-right: 0.75rem;

  fill: var(--footer-blue);

}



/* Redes sociales */

.footer-social-text {

  color: rgba(255, 255, 255, 0.8);

  margin-bottom: 1.5rem;

}



.footer-social-icons {

  display: flex;

  gap: 1rem;

  margin-bottom: 2rem;

}



.footer-social-icon {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, 0.1);

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.footer-social-svg {

  width: 20px;

  height: 20px;

  fill: var(--footer-white);

  transition: all 0.3s ease;

  z-index: 2;

}



.footer-social-icon:hover {

  transform: translateY(-5px) scale(1.1);

  box-shadow: 0 5px 15px rgba(58, 134, 255, 0.4);

}



.footer-social-icon:hover svg {

  transform: scale(1.2);

}



.footer-social-icon:after {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background: linear-gradient(45deg, var(--footer-blue), var(--footer-green));

  opacity: 0;

  transition: opacity 0.3s ease;

}



.footer-social-icon:hover:after {

  opacity: 1;

}



.footer-social-icon:before {

  content: attr(data-tooltip);

  position: absolute;

  bottom: -35px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--footer-dark);

  color: white;

  padding: 0.25rem 0.5rem;

  border-radius: 4px;

  font-size: 0.8rem;

  opacity: 0;

  transition: all 0.3s ease;

  white-space: nowrap;

  z-index: 3;

}



.footer-social-icon:hover:before {

  opacity: 1;

  bottom: -30px;

}



/* Newsletter */

.footer-newsletter {

  margin-top: 2rem;

}



.footer-newsletter-title {

  margin-bottom: 1rem;

  color: var(--footer-yellow);

}



.footer-newsletter-form {

  display: flex;

}



.footer-newsletter-input {

  flex: 1;

  padding: 0.75rem;

  border: none;

  border-radius: 50px 0 0 50px;

  background: rgba(255, 255, 255, 0.1);

  color: var(--footer-white);

}



.footer-newsletter-input::placeholder {

  color: rgba(255, 255, 255, 0.7);

}



.footer-newsletter-btn {

  border-radius: 0 50px 50px 0;

  padding: 0 1.5rem;

  background: linear-gradient(45deg, var(--footer-orange), var(--footer-yellow));

  color: var(--footer-dark);

  border: none;

  display: flex;

  align-items: center;

  cursor: pointer;

  transition: all 0.3s ease;

}



.footer-newsletter-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);

}



.footer-newsletter-icon {

  width: 16px;

  height: 16px;

  margin-left: 0.5rem;

  fill: var(--footer-dark);

}



/* Copyright */

.footer-copyright {

  text-align: center;

  padding: 1.5rem 0;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  position: relative;

}



.footer-math-symbols {

  display: flex;

  justify-content: center;

  gap: 1rem;

  margin-top: 0.5rem;

}



.footer-math-symbol {

  opacity: 0;

  transform: translateY(20px);

  animation: footer-math-appear 0.5s forwards;

  color: var(--footer-yellow);

  font-weight: bold;

}



@keyframes footer-math-appear {

  to {

    opacity: 0.7;

    transform: translateY(0);

  }

}



.footer-math-symbol:nth-child(1) { animation-delay: 0.1s; }

.footer-math-symbol:nth-child(2) { animation-delay: 0.3s; }

.footer-math-symbol:nth-child(3) { animation-delay: 0.5s; }

.footer-math-symbol:nth-child(4) { animation-delay: 0.7s; }

.footer-math-symbol:nth-child(5) { animation-delay: 0.9s; }



/* Responsive */

@media (max-width: 768px) {

  .footer-grid {

    grid-template-columns: 1fr;

  }

  

  .footer-section-title {

    font-size: 1.3rem;

  }

  

  .footer-btn {

    padding: 0.6rem 1.2rem;

  }

  

  .footer-social-icons {

    justify-content: center;

  }

  

  .footer-newsletter-form {

    flex-direction: column;

  }

  

  .footer-newsletter-input {

    border-radius: 50px;

    margin-bottom: 0.5rem;

  }

  

  .footer-newsletter-btn {

    border-radius: 50px;

    justify-content: center;

  }

}  

  



   

      

      /* ESTILOS MODIFICADOS (quitamos el "+") */

      .counter-number {

        font-size: 2.5rem;

        position: relative;

        display: inline-block;

        /* Quitamos el gradiente y dejamos blanco sólido */

        color: white !important;

        background: none !important;

        -webkit-text-fill-color: unset !important;

      }

      

      /* ELIMINAMOS completamente el pseudo-elemento ::after que mostraba el "+" */

      

      .counter-icon {

        width: 70px;

        height: 70px;

        display: flex;

        align-items: center;

        justify-content: center;

        background: rgba(255, 255, 255, 0.15);

        border-radius: 50%;

        transition: all 0.3s ease;

      }

      

      @media (max-width: 768px) {

        .counter-number {

          font-size: 2rem;

        }

        .counter-icon {

          width: 60px;

          height: 60px;

        }

        .math-symbol {

          font-size: 1.5rem;

        }

      }

    

  

  /*<!-- inicio de chatbook -->*/

 

    .chatbot-container {

                position: fixed;

                bottom: 30px;

                right: 30px;

                z-index: 1000;

                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            }

            

            .chatbot-btn {

                background: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);

                color: white;

                border: none;

                border-radius: 50px;

                padding: 15px 25px;

                display: flex;

                align-items: center;

                box-shadow: 0 5px 20px rgba(46, 134, 193, 0.4);

                cursor: pointer;

                transition: all 0.3s ease;

                animation: pulse 2s infinite;

            }

            

            .chatbot-btn:hover {

                transform: translateY(-5px);

                box-shadow: 0 8px 25px rgba(46, 134, 193, 0.6);

            }

            

            .chatbot-btn i {

                font-size: 1.5rem;

                margin-right: 10px;

            }

            

            .chatbot-modal {

                width: 350px;

                background: white;

                border-radius: 15px;

                box-shadow: 0 10px 30px rgba(0,0,0,0.1);

                overflow: hidden;

                display: none;

                position: absolute;

                bottom: 80px;

                right: 0;

            }

            

            .chatbot-modal.active {

                display: block;

            }

            

            .chatbot-header {

                background: linear-gradient(135deg, #2E86C1 0%, #1a5276 100%);

                color: white;

                padding: 15px;

                display: flex;

                justify-content: space-between;

                align-items: center;

            }

            

            .chatbot-avatar {

                width: 40px;

                height: 40px;

                border-radius: 50%;

                overflow: hidden;

                border: 2px solid white;

                background: white;

                display: flex;

                align-items: center;

                justify-content: center;

            }

            

            .chatbot-close {

                background: rgba(255,255,255,0.2);

                border: none;

                color: white;

                width: 30px;

                height: 30px;

                border-radius: 50%;

                display: flex;

                align-items: center;

                justify-content: center;

                cursor: pointer;

            }

            

            .chatbot-body {

                height: 300px;

                padding: 15px;

                overflow-y: auto;

                background: #f8f9fa;

            }

            

            .chatbot-message {

                display: flex;

                margin-bottom: 15px;

            }

            

            .chatbot-received {

                justify-content: flex-start;

            }

            

            .chatbot-sent {

                justify-content: flex-end;

            }

            

            .message-content {

                max-width: 70%;

            }

            

            .chatbot-received .message-content p {

                background: white;

                padding: 10px 15px;

                border-radius: 0 15px 15px 15px;

                margin: 0;

                box-shadow: 0 2px 5px rgba(0,0,0,0.05);

            }

            

            .chatbot-sent .message-content p {

                background: #2E86C1;

                color: white;

                padding: 10px 15px;

                border-radius: 15px 0 15px 15px;

                margin: 0;

            }

            

            .message-time {

                display: block;

                font-size: 0.7rem;

                color: #6c757d;

                margin-top: 5px;

            }

            

            .quick-options {

                display: flex;

                flex-wrap: wrap;

                gap: 8px;

                margin-top: 15px;

            }

            

            .quick-option {

                background: rgba(46, 134, 193, 0.1);

                border: 1px solid rgba(46, 134, 193, 0.2);

                border-radius: 20px;

                padding: 5px 12px;

                font-size: 0.8rem;

                color: #2E86C1;

                cursor: pointer;

            }

            

            .chatbot-footer {

                padding: 15px;

                background: white;

                border-top: 1px solid #eee;

            }

            

            @keyframes pulse {

                0% { transform: scale(1); box-shadow: 0 5px 20px rgba(46, 134, 193, 0.4); }

                50% { transform: scale(1.05); box-shadow: 0 5px 25px rgba(46, 134, 193, 0.6); }

                100% { transform: scale(1); box-shadow: 0 5px 20px rgba(46, 134, 193, 0.4); }

            }

            

            .chat-link {

                color: white;

                background: #2E86C1;

                padding: 2px 8px;

                border-radius: 4px;

                text-decoration: none;

                margin: 0 2px;

            }

            

            .chat-link.whatsapp { background: #25D366; }

            .chat-link.telegram { background: #0088cc; }

            

            @media (max-width: 576px) {

                .chatbot-container {

                    bottom: 20px;

                    right: 20px;

                }

                

                .chatbot-modal {

                    width: 300px;

                }

            }

    

  /* Estilos para los símbolos del carrusel */

#mathCarousel .math-symbols-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  pointer-events: none;

  overflow: hidden;

}



#mathCarousel .math-symbol {

  position: absolute;

  color: rgba(255, 255, 255, 0.7);

  font-size: 24px;

  font-weight: bold;

  animation: float 8s ease-in-out infinite;

  opacity: 0.8;

}



#mathCarousel .math-symbol.floating-delay {

  animation-delay: 0.5s;

}



/* Estilos para los símbolos del contador */

/* Contador - Estilos corregidos */

#blue-counter {

  position: relative;

  overflow: hidden;

  z-index: 1;

}



#blue-counter .math-symbols-bg {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 0; /* Asegurar que está detrás del contenido */

}



#blue-counter .math-symbol {

  position: absolute;

  color: rgba(255, 255, 255, 0.4);

  font-size: 20px;

  font-weight: bold;

  animation: float 10s ease-in-out infinite;

  opacity: 0.8;

}



/* Posicionamiento de símbolos en el contador */

#blue-counter .math-symbol:nth-child(1) { top: 10%; left: 5%; }

#blue-counter .math-symbol:nth-child(2) { top: 25%; right: 10%; animation-delay: 2s; }

#blue-counter .math-symbol:nth-child(3) { bottom: 30%; left: 15%; animation-delay: 4s; }

#blue-counter .math-symbol:nth-child(4) { bottom: 15%; right: 15%; animation-delay: 6s; }



/* Estilos para los símbolos del footer */

.math-rain .math-symbol {

  position: absolute;

  color: rgba(255, 255, 255, 0.6);

  font-size: 18px;

  animation: float 12s ease-in-out infinite;

}



/* Animación común */

@keyframes float {

  0%, 100% {

    transform: translateY(0) rotate(0deg);

  }

  50% {

    transform: translateY(-20px) rotate(5deg);

  }

}





        /* Estilos reserva personalizados */

        .modal-calendario .modal-dialog {

            max-width: 330px;

        }

        .flatpickr-calendar {

            margin: 0 auto;

        }

        .btn-demo {

            background: linear-gradient(135deg, #4CAF50  0%, #009688  100%);

            color: white;

            font-weight: 500;

            border: none;

            transition: all 0.3s;

        }

        .btn-demo:hover {

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(46, 134, 193, 0.4);

        }

          .header-reserva {

        background-color: #2E86C1; /* Azul */

    }

    .modal-title-centered {

        width: 100%;

        text-align: center;

        color: white;

    }