/* Paleta de colores basada en Pantone 14-4714 TCX y 15-1232 TCX */

:root {
    --island-paradise: #A5DDE4;    /* Pantone 14-4714 TCX */
    --salmon: #FFA177;             /* Pantone 15-1232 TCX */
    --white-sand: #F1F0EC;         /* Pantone 11-0602 TCX */
    --coral-blush: #EBA598;        /* Pantone 16-1526 TCX */
    --atlantic-deep: #007681;      /* Pantone 19-4726 TCX */
    --warm-gray: #D5D5D3;          /* Pantone 14-4102 TCX */
  }
     
body {
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
     background: #ffffff;
     color: #000000;
     align-content: center;
 }
 .navbar {
    background-color: #19191a !important; /* gris medio */
}
 

 .navbar-brand {
     font-family: 'Orbitron', sans-serif;
     font-weight: 900;
     font-size: 2em;
     color: #ffffff !important;
     
 }

 .navbar .nav-link {
    color: #ffffff; /* texto gris oscuro */
}

.navbar .nav-link:hover {
    color: #ffffff !important; 
}
.navbar .nav-link.show { /* texto blanco despues de apretarlo */
    color: #ffffff !important; 
}
 

 .navbar-toggler {
     border: none;
     color: #ffffff !important;
 }

 .navbar-toggler:hover {
     background-color: #19191a !important; /* gris medio */
     color: #ffffff !important;
 }

 .navbar-collapse {
     justify-content: flex-end;
 }

 .navbar-nav .nav-item.active .nav-link {
     color: var(--salmon) !important;
     font-weight: 600;

}
 .contacto-btn {
     background: var(--salmon);
     color: #000000 !important;
     font-weight: 600;
     padding: 10px 20px;
     border-radius: 10px;
 }
 .grupo{
    color: var(--salmon);
 }
 .grupo:hover{
    color: var(--salmon) !important;
    background-color: #ffffff !important;
 }
 
 .dropdown-menu {
     border-radius: 5px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 }
 
 /* Footer */
 
 /* Footer */
 footer {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

footer .footer-center {
    flex: 1;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 1.5em;
    color: #000;
}

footer .footer-left,
footer .footer-right {
    flex: 1;
    text-align: center;
}

footer .footer-left {
    text-align: left;
}

footer .footer-right {
   text-align: right;
   display: flex;            /* Flexbox activa */
   justify-content: flex-end; /* Pega los íconos a la derecha */
   align-items: center;      /* Centra verticalmente */
   gap: 15px; 
}



.github-icon {
    width: 24px !important;
    height: 24px !important;
    margin-left: 15px;
    vertical-align: middle;
    background:  url('../assets/icons/github.png') center/cover no-repeat;;
}


.instagram-icon {
   width: 24px !important;
   height: 24px !important;
   margin-left: 15px;
   vertical-align: middle;
   background:  url('../assets/icons/instagram.png') center/cover no-repeat;;
} 
.whatsapp-icon {
   width: 24px !important;
   height: 24px !important;
   margin-left: 15px;
   vertical-align: middle;
   background:  url('../assets/icons/whatsapp.webp') center/cover no-repeat;;
}
/* Estilos generales de la sección */
.presentacion {
    padding: 5rem 20rem 5rem 20rem;
    background-color: #19191a;
}

/* Estilo para etiquetas tipo badge */
.presentacion .tag {
    display: inline-block;
    padding: 0.35em 0.8em;
    margin: 0 0.4em 0.4em 0;
    font-size: 0.85rem;
    color: var(--salmon) !important;
    background-color: transparent !important;
    border: 1px solid var(--salmon) !important;
    border-radius: 7px; /* redondeado tipo 'pill' */
    transition: all 0.3s ease;
}

.presentacion .tag:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

/* Estilo para el botón Pre Order */
.btn-preorder {
    display: inline-block;
    padding: 0.5em 1.2em;
    font-size: 1rem;
    color:  var(--salmon) !important;
    border: 1px solid  var(--salmon) !important;
    border-radius: 7px;
    background-color: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-preorder:hover {
    background-color:  var(--salmon) !important;
    color: #fff !important;
}
    
/* Imagen con sombra y bordes redondeados */
.presentacion img {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.markdown-content {
    padding: 20px;
    background: #fff;
    max-width: 100%;
    margin: 0 auto;
}