@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-akutangulo: #9300D3; /* Color primario */
    --color-secundario: #0ff; /* Color secundario */
    --color-fondo: #121212; /* Fondo oscuro por defecto */
    --color-fondo-secundario: #1E1E1E; /* Gris oscuro */
    --color-texto: #f8f8f8; /* Texto claro por defecto */
    --color-texto-secundario: #CCCCCC; /* Gris claro */   
    --color-fondo-transparente: rgba(255, 255, 255, 0.8); /* Color de fondo semi-transparente */
}

/* Tema Claro */
.tema-claro {
    --color-fondo: #fafbfd; /* Blanco */
    --color-fondo-secundario: #CCCCCC; /* Gris claro */
    --color-texto: #191919; /* Negro */
    --color-texto-secundario: #3f3f3f; /* Gris oscuro */
    --color-fondo-transparente: rgba(30, 30, 30, 0.8); /* Color de fondo semi-transparente */
}

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Afacad Flux", sans-serif;
    line-height: 1.4;
    font-size: 1rem;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    transition: background-color 0.3s, color 0.3s;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background-color: var(--color-akutangulo);
    color: var(--color-texto);
    position: relative;
    flex-wrap: wrap;
}

.theme-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    background-color: var(--color-fondo-transparente);
    color: var(--color-texto);
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    padding: 10px;
    font-size: 1.2rem; 
}
iframe {
    display: block;
    width: 100%;
    height: 60vh;
    border: none;
    margin: 0;
}

nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

nav a {
    color: #f8f8f8;
    text-decoration: none;
    font-size: 1.5rem;
    margin: 0.1rem 1rem;
}

nav a:hover {
    font-size: 1.6rem;
    -webkit-text-stroke: 1px var(--color-texto-secundario);
    color: var(--color-secundario);
}

.menu-hamburguesa {
    display: none;
    cursor: pointer;
    font-size: 3rem;
    color: #f8f8f8;
}

@media (max-width: 768px) {
    nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        background-color: var(--color-akutangulo);
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1;
        gap: 0.1rem;
    }
    nav.active {
        display: flex;
    }
    .menu-hamburguesa {
        display: block;
    }

    iframe {
        height: 70vh;
    }
}

.prompts-bar {
    background-color: #7a00b3;
    text-align: left;
    padding: 1rem;
}

.emoji-logo {
    font-size: 2.5rem;
    line-height: 1;
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease;
}

.emoji-logo:hover {
    transform: scale(2);
    z-index: 10;
}

.chatsbotses {
    white-space: nowrap;
    font-size: 2.5rem;
}

h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    font-size: 1.5rem;
}
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.7rem;
    }
    h3 {
        font-size: 1.3rem;
    }
}
.cta-button {
    background-color: var(--color-secundario);
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    color: #121212;
    font-weight: 600;
    text-decoration: none;
    flex-wrap: wrap;
    display: inline-block;
}
@media (max-width: 768px) {
    .cta-button {
        margin: 1rem;
    }
}
.pulse {
    box-shadow: 0 0 0 0 rgb(0,255,255);
    cursor: pointer;
    animation: pulse 1.25s infinite cubic-bezier(0.66,0,0,1);
}

.pulse:hover {
    animation: none;
}

@keyframes pulse {
    to {
        box-shadow: 0 0 0 10px rgba(232,76,61,0);
    }
}
@keyframes neon-color-change {
0%, 100% {
    color: var(--color-secundario); 
    /* Descomentar para efecto de luz neon */
    /* text-shadow: 0 0 5px var(--color-secundario), 0 0 10px var(--color-secundario), 0 0 15px var(--color-secundario), 0 0 20px #00f, 0 0 30px #00f, 0 0 40px #00f; */
}
25% {
    color: #f0f;
    /* text-shadow: 0 0 5px #f0f, 0 0 10px #f0f, 0 0 15px #f0f, 0 0 20px #f0f, 0 0 30px #f0f, 0 0 40px #f0f; */
}
50% {
    color: #ff0;
    /* text-shadow: 0 0 5px #ff0, 0 0 10px #ff0, 0 0 15px #ff0, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 40px #ff0; */
}
75% {
    color: #0f0;
    /* text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0, 0 0 30px #0f0, 0 0 40px #0f0; */
}
}

.neon-text {
font-weight: 900;
animation: neon-color-change 30s infinite; /* Duración de 20 segundos para una transición más lenta */

transition: all 0.5s ease-in-out;
-webkit-text-stroke: 1px var(--color-texto-secundario);
}

.neon-text:hover {
animation: none; /* Detener la animación al pasar el mouse */
color: var(--color-akutangulo); /* Usar color primario en hover */
-webkit-text-stroke: 1px var(--color-fondo-secundario);
text-shadow: 0 0 10px var(--color-akutangulo), 
             0 0 20px var(--color-akutangulo), 
             0 0 30px var(--color-akutangulo), 
             0 0 40px var(--color-akutangulo), 
             0 0 50px var(--color-akutangulo), 
             0 0 60px var(--color-akutangulo);
}

.bubble {
background-color: var(--color-fondo-secundario);
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
position: relative;
margin: 20px auto;
color: var(--color-texto);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.bubble.show {
opacity: 1;
transform: translateY(0);
}

.left {
margin-left: 1rem;
}

.right {
margin-right: 1rem;
}

.centrado {
    margin: 1rem;
}
/*** General Button Styles ***/
/* Contenedor grid mejorado */
        .contenedor-botones-akutangulo {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
            justify-content: center;
            gap: 1.5rem;
            padding: 2rem;
            width: 100%;
            box-sizing: border-box;
        }

        .boton-akutangulo {
            cursor: pointer;
            height: 50px;
            width: 300px;
            perspective: 1000px;
            margin: 0 auto;
        }

        .boton-akutangulo .flipper3d {
            transition: all 0.5s ease-in-out;
            transform-style: preserve-3d;
            position: relative;
            transform-origin: 100% 22.5px;
            margin: 2rem auto;
        }

        .boton-akutangulo .boton-aku {
            height: 50px;
            width: 100%;
            backface-visibility: hidden;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 1px 2px 4px -1px rgba(60, 60, 60, 0.64);
            background: linear-gradient(90deg, var(--color-secundario), var(--color-secundario));
            box-sizing: border-box;
            padding: 5px;
        }

        .boton-akutangulo .front {
            transform: translateZ(22.5px);
        }

        .boton-akutangulo .back {
            color: #333;
            font-size: 0.85rem;
            text-transform: uppercase;
            line-height: 1.4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            white-space: normal;
            word-break: break-word;
        }

        /* Efectos Flip */
        .boton-akutangulo-flip3d-up .back {
            transform: rotateX(90deg) translateZ(22.5px);
        }

        .boton-akutangulo-flip3d-up:hover .flipper3d {
            transform: rotateX(-90deg);
        }

        .boton-akutangulo-flip3d-down .back {
            transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(22.5px);
        }

        .boton-akutangulo-flip3d-down:hover .flipper3d {
            transform: rotateX(90deg);
        }

        .iconos-botones-sociales {
            font-size: 7em;
            color: var(--color-akutangulo);
            margin: 0 0 5px 0;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .contenedor-botones-akutangulo {
                grid-template-columns: repeat(auto-fit, minmax(280px, max-content));
                gap: 1rem;
                padding: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .contenedor-botones-akutangulo {
                grid-template-columns: minmax(250px, 300px);
                padding: 1rem;
            }
            
            .boton-akutangulo {
                margin: 1.5rem auto;
            }
        }

        @media (max-width: 480px) {
            .contenedor-botones-akutangulo {
                padding: 0.5rem;
            }
            
            .boton-akutangulo .back {
                font-size: 0.75rem;
            }
        }
/**************************************************
 * Footer Akutangulo.com *
 **************************************************/
@font-face {
font-family: 'bauhouse_akutangulo';
src: url('../fonts/bauhouse_akutangulo.eot'); /* archivo EOT para IE */ 
src: url('../fonts/bauhouse_akutangulo.eot?#iefix') format('embedded-opentype'),
url('../fonts/bauhouse_akutangulo.ttf') format('truetype'); /* archivo TTF para navegadores CSS3 */ 
}
.akutangulo-diseño-web-seo {
  font-family: 'bauhouse_akutangulo';
  color: #9400D3;
  animation:glow 10s ease-in-out infinite;
}
                
@keyframes glow {
0%,100%{ text-shadow:0 0 30px DeepPink; }
25%{ text-shadow:0 0 30px Lime; }
50%{ text-shadow:0 0 30px Magenta; }
75%{ text-shadow:0 0 30px MediumSlateBlue; }
}

footer {
    background-color: var(--color-akutangulo);
    color: var(--color-texto);
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 1.3rem; 
}
footer a {
    color: #fff;
    font-size: 1rem; 
}
footer a:hover {
    font-size: 1.1rem; 
    -webkit-text-stroke: 1px var(--color-secundario);
}
.footer-legal {
    color: #fff;
}

.footer {
    padding: 20px;
    text-align: center;
    }	
    .footer-logo {
    margin:15px auto;
    width: 76px;
    }
    .copyright {
    color: var(--color-texto);
    font-size: 1.2rem;
    }
    .copyright a {
    text-decoration: none; 
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    }
    .copyright a:hover {
    font-size: larger;
    }

/* Estilo base para el trazado del logo Akutangulo en svg*/
.animacion-logo-svg {
    fill: none;
    stroke: #9300D3; /* Color del trazado */
    stroke-width: 5; /* Ancho del trazado */
    stroke-dasharray: 3000; /* Longitud total del trazado */
    stroke-dashoffset: 3000; /* Desplazamiento inicial, oculta el trazado */
    animation: draw 5s ease-in-out forwards, fillLogo 2s ease-in-out forwards 3s, glow 10s ease-in-out infinite;
    }
    /* Animación para dibujar el trazado del logo Akutangulo */
    @keyframes draw {
    0% {
    stroke-dashoffset: 3000; /* Comienza con el trazado completamente oculto */
    }
    100% {
    stroke-dashoffset: 0; /* Desplazamiento final, muestra todo el trazado */
    }
    }
    /* Animación para rellenar el logo con color */
    @keyframes fillLogo {
    0% {
    fill: transparent; /* Comienza con el relleno transparente */
    }
    50% {
    fill: #fbf8fb; /* Termina con el color de relleno */
    }
    100% {
    fill: #9300D3; /* Termina con el color de relleno */
    }
    }

/***********************************************
 * Back to top Button de la página ChatsBotsES *
 ***********************************************/

 #back-to-top-btn {
    display: none; /* Inicialmente oculto */
    position: fixed;
    bottom: 1vw; /* Ajustado con vw para margen inferior */
    left: 50%; /* Centrar horizontalmente */
    transform: translateX(-50%); /* Mantener el centrado */
    z-index: 9990; /* Asegura que esté por encima de otros elementos, pero debajo del chatbot */
    background-color: var(--color-secundario);
    color: var(--color-fondo);
    border: none;
    border-radius: 50%;
    padding: 0.8em 1.1em; /* Unidades em para padding relativo */
    font-size: 1em; /* Unidades em para tamaño de fuente relativo */
    cursor: pointer;
    box-shadow: 0px 0.4em 0.6em rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  #back-to-top-btn:hover {
    background-color: rgba(179, 76, 224, 0.5); /* Color con transparencia */
    transform: translateX(-50%) scale(1.1); /* Escalado sin desplazar */
    color: var(--color-texto);
  }

/************************************
 * Modal del formulario de contacto *
 ************************************/
 .modal {
    display: none; /* Ocultamos el modal por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-fondo-transparente);
  }
  
  .modal-contenido {
    background-color: var(--color-fondo-secundario);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    height: auto;
    border-radius: 15px;
  }
  
  .contacto-modal a .boton-akutangulo {
    margin-bottom: 4rem; 
    display: block;
    }

  .cerrar {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .cerrar:hover,
  .cerrar:focus {
    color: var(--color-secundario);
    text-decoration: none;
    cursor: pointer;
  }
  
  .redes-sociales {
    text-align: center;
    margin-top: 20px;
  }
  .formulario-contacto {
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      width: 100%; 
      max-width: 600px; /* Establece un ancho máximo */
      margin: 0 auto; /* Centra el formulario */
      padding: 20px; /* Simplificar espacio interno */
  }
  
  .input-formulario, .consulta-formulario {
      width: 90%; /* Ancho de los campos */
      padding: 10px; /* Espaciado interno */
      margin: 10px 0; /* Separación entre campos */
      border: 2px solid var(--color-akutangulo); /* Estilo del borde */
      border-radius: 5px; /* Bordes redondeados */
      font-size: 1rem; /* Tamaño de fuente */
      min-height: 50px; /* Altura mínima para el textarea */
      resize: none; /* Sin redimensionar manualmente */
      overflow: hidden; /* Ocultar desbordamiento */
      background-color: rgb(234, 229, 238);
      font-family: "Afacad Flux", sans-serif;
  }
  
  .input-formulario:focus, 
  .consulta-formulario:focus {
      background-color: white;
      border: 2px solid var(--color-secundario); /* Color del borde al enfocar */
      outline: none; /* Sin contorno */
      font-family: "Afacad Flux", sans-serif;
      font-size: 1.1rem;
  }
  
  .enviar-formulario {
      width: 90%; /* Utiliza el 90% del ancho del contenedor */
      padding: 15px; /* Espacio interno */
      border: none; /* Elimina borde */
      border-radius: 5px; /* Bordes redondeados */
      background-color: var(--color-secundario); /* Color de fondo */
      font-size: 1.5rem; /* Tamaño de fuente */
      cursor: pointer; /* Cambia cursor al pasar el ratón */
      font-family: "Afacad Flux", sans-serif;
  }
  
  .enviar-formulario:hover {
      font-size: 1.6rem; /* Aumenta tamaño al pasar el ratón */
      color: azure;
      background-color: var(--color-akutangulo); /* Cambia color de fondo al pasar el ratón */
  }
  .texto-formulario {
    text-align: center;
  }

/* Estilos para el diagrama mermaid y el contenedor de al lado, estoy pensando en manejar el mermaid con javascript para cambiar la direccion de graph LR a TD */

        .funcionamiento-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 1rem; 
        }

        .funcion-section,
        .mermaid { 
            flex: 1;
        }

        .funcion-section {
            margin-right: 1rem; /* Margen solo para separar texto del diagrama en pantallas grandes */
        }

        .mermaid {
            height: auto;
        }

        .flowchart-link {
      animation: animacion-linea-mermaid 0.3s linear infinite; /*  Hemos cambiado el nombre de la animación a 'animacion-linea-mermaid' para claridad */
      stroke-dashoffset: 15px; /*  Añadimos stroke-dashoffset inicial */
    }
  
    @keyframes animacion-linea-mermaid { /*  Nombre de keyframes cambiado para coincidir */
      to {
        stroke-dashoffset: 0; /*  Animamos stroke-dashoffset a 0 */
      }
    }

        /* Media queries para móviles -  Texto más grande y apilar verticalmente */
        @media (max-width: 768px) {
            .funcionamiento-wrapper {
                flex-direction: column; /* Apilar verticalmente en móviles */
                margin: 1rem 0; /* Margen superior e inferior en móviles */
            }

            .funcion-section {
                margin-right: 0; /* Eliminar margen derecho en móviles */
                margin-bottom: 1rem; /* Margen inferior entre secciones en móviles */
            }

            .mermaid {
                width: 100%; /* Ancho completo en móviles */
            }

            /*  Agrupamos selectores de texto Mermaid en móviles */
            .mermaid .nodeLabel,
            .mermaid .edgeLabel,
            .mermaid .label {
                font-size: 1.2rem !important; /* Tamaño de texto aumentado en móviles */
            }
        }

        /* Animación para las puntas de las flechas */
        @keyframes animacionPuntasFlechas {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        /* Media queries para móviles -  Texto más grande y apilar verticalmente */
        @media (max-width: 768px) {
            .funcionamiento-wrapper {
                flex-direction: column; /* Apilar verticalmente en móviles */
                margin: 1rem 0; /* Margen superior e inferior en móviles */
            }
            .funcion-section {
                margin-right: 0; /* Eliminar margen derecho en móviles */
                margin-bottom: 1rem; /* Margen inferior entre secciones en móviles */
            }
            .mermaid {
                width: 100%; /* Ancho completo en móviles */
            }
            /*  Agrupamos selectores de texto Mermaid en móviles */
            .mermaid .nodeLabel,
            .mermaid .edgeLabel,
            .mermaid .label {
                font-size: 1.5rem !important; /* Tamaño de texto aumentado en móviles */
            }
        }
        /* Media query para pantallas muy pequeñas - Aumentar texto aún más */
        @media (max-width: 480px) {
            .mermaid .nodeLabel,
            .mermaid .edgeLabel,
            .mermaid .label {
                font-size: 2rem !important; /* Tamaño de texto aumentado en pantallas muy pequeñas */
            }
        }