/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #39ff14;
}

/* Header y Navbar */
header {
    background-color: #000000;
    color: #39ff14;
    padding: 10px 20px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    color: #39ff14;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

/* Botón de CTA */
.cta .btn-cta {
    background-color: #000000;
    color: #39ff14;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    border: 1px solid #39ff14;
    transition: background-color 0.3s, color 0.3s;
}

.cta .btn-cta:hover {
    background-color: #39ff14;
    color: #000000;
}

/* Estilos para el Hero de Servicios */
.servicios-hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #000000;
    color: #39ff14;
}

.servicios-hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.servicios-hero p {
    font-size: 24px;
}

/* Estilos para la Lista de Servicios */
.servicios-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 50px 20px;
    background-color: #000000;
}

.servicio {
    background-color: #000000;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(57,255,20,0.1);
    padding: 20px;
    text-align: center;
    width: 250px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #39ff14;
}

.servicio:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(57,255,20,0.2);
}

.servicio i {
    font-size: 48px;
    color: #39ff14;
    margin-bottom: 20px;
}

.servicio h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.servicio p {
    font-size: 16px;
    color: #39ff14;
}

/* Estilos para la Sección CTA */
.cta-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #000000;
    color: #39ff14;
}

.cta-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 18px;
    margin-bottom: 20px;
}

.cta-section .btn-cta {
    background-color: #000000;
    color: #39ff14;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #39ff14;
    transition: background-color 0.3s, color 0.3s;
}

.cta-section .btn-cta:hover {
    background-color: #39ff14;
    color: #000000;
}

/* Estilos para el Footer */
footer {
    background-color: #000000;
    color: #39ff14;
    padding: 40px 20px;
    text-align: center;
}

footer .social-links {
    margin-bottom: 20px;
}

footer .social-links a {
    color: #39ff14;
    font-size: 24px;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
}

footer .social-links a:hover {
    color: #00ff00;
    transform: translateY(-5px);
}

footer p {
    margin: 0;
    font-size: 14px;
    color: #39ff14;
}

/* Estilos Responsive para el Footer */
@media (max-width: 768px) {
    footer .social-links a {
        font-size: 20px;
        margin: 0 8px;
    }

    footer p {
        font-size: 12px;
    }
}

/* Estilos para el Hero de Contacto */
.contacto-hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #000000;
    color: #39ff14;
}

.contacto-hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.contacto-hero p {
    font-size: 24px;
}

/* Estilos para la Sección de Contacto */
.contacto-contenido {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.contacto-info, .contacto-formulario {
    flex: 1;
    min-width: 300px;
    margin: 20px;
}

.contacto-info h2, .contacto-formulario h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #39ff14;
}

.contacto-info p {
    font-size: 16px;
    color: #39ff14;
    margin-bottom: 20px;
}

.contacto-info ul {
    list-style: none;
    padding: 0;
}

.contacto-info ul li {
    margin-bottom: 15px;
    font-size: 16px;
    color: #39ff14;
}

.contacto-info ul li i {
    margin-right: 10px;
    color: #39ff14;
}

.contacto-info ul li a {
    color: #39ff14;
    text-decoration: none;
    transition: color 0.3s;
}

.contacto-info ul li a:hover {
    color: #00ff00;
}

.redes-sociales {
    margin-top: 20px;
}

.redes-sociales a {
    color: #39ff14;
    font-size: 24px;
    margin-right: 15px;
    transition: color 0.3s;
}

.redes-sociales a:hover {
    color: #00ff00;
}

/* Estilos para el Formulario de Contacto */
.contacto-formulario form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-size: 16px;
    color: #39ff14;
    margin-bottom: 5px;
    display: block;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: #000000;
    color: #39ff14;
    border: 1px solid #39ff14;
    border-radius: 5px;
    transition: border-color 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #00ff00;
    outline: none;
}

.btn-enviar {
    background-color: #000000;
    color: #39ff14;
    padding: 10px 20px;
    border: 1px solid #39ff14;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn-enviar:hover {
    background-color: #39ff14;
    color: #000000;
}

/* Estilos Responsive */
@media (max-width: 768px) {
    .contacto-contenido {
        flex-direction: column;
    }

    .contacto-info, .contacto-formulario {
        margin: 10px 0;
    }
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #000000;
    color: #39ff14;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out;
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

.hero .slogan {
    font-size: 24px;
    margin-bottom: 10px;
    animation: fadeInUp 1s ease-out 0.3s forwards;
    opacity: 0;
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

.hero .sub-slogan {
    font-size: 18px;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out 0.6s forwards;
    opacity: 0;
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.logo img {
    height: 30px; /* Tamaño más pequeño para móviles */
}

.logo span {
    font-size: 20px; /* Tamaño de texto más pequeño para móviles */
}

.logo img {
    height: 40px; /* Ajusta la altura según el tamaño de tu logo */
    width: auto; /* Mantiene la proporción del logo */
}

.logo span {
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    color: #39ff14;
}

.btn-catalogo, .btn-contacto {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
    border: 1px solid #39ff14;
    background-color: #000000;
    color: #39ff14;
}

.btn-catalogo:hover, .btn-contacto:hover {
    background-color: #39ff14;
    color: #000000;
    transform: translateY(-5px);
}

/* Sección del Mandala */
.mandala-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-color: #000000;
}

#mandalaCanvas {
    border: 1px solid #39ff14;
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

/* Frases Publicitarias */
.frases-publicitarias {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 50px 20px;
    background-color: #000000;
}

.frase {
    text-align: center;
    max-width: 300px;
    margin: 20px;
}

.frase i {
    font-size: 48px;
    color: #39ff14;
    margin-bottom: 20px;
}

.frase p {
    font-size: 18px;
    color: #39ff14;
}

.frase strong {
    color: #39ff14;
}

/* Estilos para el CTA Final */
.cta-final {
    text-align: center;
    padding: 50px 20px;
    background-color: #000000;
    color: #39ff14;
}

.cta-final h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta-final p {
    font-size: 18px;
    margin-bottom: 20px;
}

.cta-final .btn-cta {
    background-color: #000000;
    color: #39ff14;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #39ff14;
    transition: background-color 0.3s, color 0.3s;
}

.cta-final .btn-cta:hover {
    background-color: #39ff14;
    color: #000000;
}

/* Estilos Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }

    .hero .slogan {
        font-size: 20px;
    }

    .hero .sub-slogan {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .frases-publicitarias {
        flex-direction: column;
        align-items: center;
    }
}

/* Alertas *//* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1E1E2E;    /* Fondo oscuro estilo VSCode */
    color: #C8C8C8;               /* Texto principal gris claro */
}

/* Header y Navbar */
header {
    background-color: #1E1E2E;
    color: #8BE9FD;               /* Magenta neón */
    padding: 10px 20px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    color: #FF79C6;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

/* Botón de CTA */
.cta .btn-cta {
    background-color: #282A36;    /* Gris medio */
    color: #8BE9FD;               /* Cyan neón */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    border: 1px solid #8BE9FD;
    transition: background-color 0.3s, color 0.3s;
}

.cta .btn-cta:hover {
    background-color: #8BE9FD;
    color: #282A36;
}

/* Estilos para el Hero de Servicios */
.servicios-hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #282A36;
    color: #FF79C6;
}

.servicios-hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.servicios-hero p {
    font-size: 24px;
}

/* Estilos para la Lista de Servicios */
.servicios-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 50px 20px;
    background-color: #1E1E2E;
}

.servicio {
    background-color: #282A36;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    text-align: center;
    width: 250px;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #BD93F9;    /* Púrpura neón */
}

.servicio:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(189,147,249,0.7);
}

.servicio i {
    font-size: 48px;
    color: #50FA7B;               /* Verde neón */
    margin-bottom: 20px;
}

.servicio h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #FFB86C;               /* Amarillo suave */
}

.servicio p {
    font-size: 16px;
    color: #F8F8F2;
}

/* Estilos para la Sección CTA */
.cta-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #1E1E2E;
    color: #FF79C6;
}

.cta-section h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 18px;
    margin-bottom: 20px;
}

.cta-section .btn-cta {
    background-color: #282A36;
    color: #8BE9FD;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #8BE9FD;
    transition: background-color 0.3s, color 0.3s;
}

.cta-section .btn-cta:hover {
    background-color: #8BE9FD;
    color: #282A36;
}

/* Estilos para el Footer */
footer {
    background-color: #1E1E2E;
    color: #C8C8C8;
    padding: 40px 20px;
    text-align: center;
}

footer .social-links {
    margin-bottom: 20px;
}

footer .social-links a {
    color: #BD93F9;
    font-size: 24px;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
}

footer .social-links a:hover {
    color: #FF79C6;
    transform: translateY(-5px);
}

footer p {
    margin: 0;
    font-size: 14px;
    color: #6272A4;               /* Gris azulado */
}

/* Estilos Responsive para el Footer */
@media (max-width: 768px) {
    footer .social-links a {
        font-size: 20px;
        margin: 0 8px;
    }

    footer p {
        font-size: 12px;
    }
}

/* Estilos para el Hero de Contacto */
.contacto-hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #282A36;
    color: #8BE9FD;
}

.contacto-hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.contacto-hero p {
    font-size: 24px;
}

/* Estilos para la Sección de Contacto */
.contacto-contenido {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.contacto-info, .contacto-formulario {
    flex: 1;
    min-width: 300px;
    margin: 20px;
}

.contacto-info h2, .contacto-formulario h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #FF79C6;
}

.contacto-info p {
    font-size: 16px;
    color: #F8F8F2;
    margin-bottom: 20px;
}

.contacto-info ul {
    list-style: none;
    padding: 0;
}

.contacto-info ul li {
    margin-bottom: 15px;
    font-size: 16px;
    color: #C8C8C8;
}

.contacto-info ul li i {
    margin-right: 10px;
    color: #8BE9FD;
}

.contacto-info ul li a {
    color: #8BE9FD;
    text-decoration: none;
    transition: color 0.3s;
}

.contacto-info ul li a:hover {
    color: #50FA7B;
}

.redes-sociales {
    margin-top: 20px;
}

.redes-sociales a {
    color: #C8C8C8;
    font-size: 24px;
    margin-right: 15px;
    transition: color 0.3s;
}

.redes-sociales a:hover {
    color: #FF79C6;
}

/* Estilos para el Formulario de Contacto */
.contacto-formulario form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-size: 16px;
    color: #C8C8C8;
    margin-bottom: 5px;
    display: block;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: #1E1E2E;
    color: #C8C8C8;
    border: 1px solid #6272A4;
    border-radius: 5px;
    transition: border-color 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #50FA7B;
    outline: none;
}

.btn-enviar {
    background-color: #282A36;
    color: #8BE9FD;
    padding: 10px 20px;
    border: 1px solid #8BE9FD;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn-enviar:hover {
    background-color: #50FA7B;
    color: #282A36;
}

/* Estilos Responsive */
@media (max-width: 768px) {
    .contacto-contenido {
        flex-direction: column;
    }

    .contacto-info, .contacto-formulario {
        margin: 10px 0;
    }
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #1E1E2E;
    color: #C8C8C8;
}

.hero h1 {
    font-size: 48px;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease-out;
    color: #8BE9FD;
}

.hero .slogan {
    font-size: 24px;
    margin-bottom: 10px;
    animation: fadeInUp 1s ease-out 0.3s forwards;
    opacity: 0;
    color: #00FFFF;
}

.hero .sub-slogan {
    font-size: 18px;
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out 0.6s forwards;
    opacity: 0;
    color: #50FA7B;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.logo img {
    height: 30px;
}

.logo span {
    font-size: 20px;
}

.logo img {
    height: 40px;
    width: auto;
}

.logo span {
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    color: #FF79C6;
}

.btn-catalogo, .btn-contacto {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
    border: 1px solid #6272A4;
    background-color: #282A36;
    color: #C8C8C8;
}

.btn-catalogo:hover, .btn-contacto:hover {
    background-color: #FF79C6;
    color: #1E1E2E;
    transform: translateY(-5px);
}

/* Sección del Mandala */
.mandala-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-color: #1E1E2E;
}

#mandalaCanvas {
    border: 1px solid #6272A4;
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

/* Frases Publicitarias */
.frases-publicitarias {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 50px 20px;
    background-color: #282A36;
}

.frase {
    text-align: center;
    max-width: 300px;
    margin: 20px;
}

.frase i {
    font-size: 48px;
    color: #FF79C6;
    margin-bottom: 20px;
}

.frase p {
    font-size: 18px;
    color: #C8C8C8;
}

.frase strong {
    color: #8BE9FD;
}

/* Estilos para el CTA Final */
.cta-final {
    text-align: center;
    padding: 50px 20px;
    background-color: #282A36;
    color: #FFB86C;
}

.cta-final h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta-final p {
    font-size: 18px;
    margin-bottom: 20px;
}

.cta-final .btn-cta {
    background-color: #282A36;
    color: #FF79C6;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid #FF79C6;
    transition: background-color 0.3s, color 0.3s;
}

.cta-final .btn-cta:hover {
    background-color: #FF79C6;
    color: #1E1E2E;
}

/* Estilos Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 36px;
    }

    .hero .slogan {
        font-size: 20px;
    }

    .hero .sub-slogan {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .frases-publicitarias {
        flex-direction: column;
        align-items: center;
    }
}

/* Alertas */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #FF79C6;
    border-radius: 4px;
    background-color: #282A36;
    color: #C8C8C8;
}

.alert-success {
    border-color: #50FA7B;
    background-color: rgba(80,250,123,0.1);
    color: #50FA7B;
}

.alert-error {
    border-color: #FF5555;
    background-color: rgba(255,85,85,0.1);
    color: #FF5555;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #39ff14;
    border-radius: 4px;
    background-color: #000000;
    color: #39ff14;
}

.alert-success {
    border-color: #00ff00;
    background-color: rgba(57,255,20,0.1);
    color: #00ff00;
}

.alert-error {
    border-color: #ff0033;
    background-color: rgba(255,0,51,0.1);
    color: #ff0033;
}
/* Estilos del Carrusel */
.hero.carousel {
  position: relative;
  width: 100%;
  height: 70vh; /* Ajusta según necesites */
  overflow: hidden;
}

.carousel-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content-cot {
    position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}
/* Estilos para Planes de Cotización */
.planes-cotizacion {
    position: relative;
    padding: 50px 0;
    background-color: #1E1E2E;
    
}

.plan-card {
    background: #282A36;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    border: 2px solid;
}

.plan-card.basico {
    border-color: #50FA7B;
}

.plan-card.intermedio {
    border-color: #BD93F9;
}

.plan-card.avanzado {
    border-color: #FF79C6;
}

.plan-card h3 {
    color: #8BE9FD;
    margin-bottom: 20px;
}

.precio {
    font-size: 24px;
    color: #50FA7B;
    margin-bottom: 15px;
}

.caracteristicas li {
    padding: 8px 0;
    border-bottom: 1px dashed #6272A4;
}