@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --morado-fondo: #1F1B35;
    --negro: #000000;
    --blanco: #ffffff;
    --gris-ultra-claro: #f7f7f7;
    --gris-claro: #DADFEC;
    --gris-oscuro: #646464;
    --rosado: #E62C59;
    --celeste: #009DCB;
    --azul: #0043ff;
    --morado-principal: #6319C3;
}

/* Soporte para animaciones y fondos */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* El fondo del header con transparencia inicial */
#main-header {
    background-color: rgba(0, 0, 0, 0); /* Transparente al inicio */
}

/* Aseguramos que el contenido tenga un padding superior para que el hero no se tape */
main {
    padding-top: 0; /* Ya que el hero usa 100vh */
}

body {
    font-family: 'Poppins', sans-serif;
}

.animate-pulse-slow {
    animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

body {
    font-family: 'Poppins', sans-serif;
}

/* Estilos para el botón de hamburguesa animado */
.menu .line {
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu .line1 {
    stroke-dasharray: 60 207;
}

.menu .line2 {
    stroke-dasharray: 60 60;
}

.menu .line3 {
    stroke-dasharray: 60 207;
}

.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
}

.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

/* Clase de scroll para el header */
/* Clase de scroll para el header (Corregida para que funcione sin compilador) */
.header-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Color de los enlaces al hacer scroll */
.header-scrolled .nav-link {
    color: #1f2937 !important; /* Gris oscuro (gray-800) */
}

/* Estilo del botón al hacer scroll */
.header-scrolled .btn-contactar {
    background: linear-gradient(to right, #2563eb, #1e40af) !important;
    color: #ffffff !important;
    border: none !important;
}

/**** WS BUTTON ****/
.cont-btn-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 20;
    pointer-events: none;
}

.whatsapp-card {
    background-color: var(--blanco);
    border-radius: 15px;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 15px;
    -webkit-font-smoothing: antialiased;
    transform: translate(120%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.whatsapp-card-active {
    transform: translate(0, 0);
    pointer-events: all;
}

.card-header {
    display: flex;
    background-color: #24ac1f;
    color: var(--blanco);
    padding: 15px;
    border-radius: 15px 15px 0 0;
}

.card-header svg {
    margin-right: 20px;
}

.card-header h2 {
    font-size: 18px;
    color: var(--blanco);
}

.card-header p {
    font-size: 12px;
    color: var(--blanco);
}

.card-body {
    padding: 10px;
}

.cont-contact {
    padding: 10px;
    display: flex;
    background-color: #e9e9e9;
    border-radius: 10px;
    cursor: pointer;
    margin: 2px 0;
    align-items: center;
}

.cont-contact img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 100px;
}

.cont-contact p {
    font-size: 12px;
}

.btn-ws-cont {
    position: relative;
    background-color: #24ac1f;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 60px;
    height: 60px;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    cursor: pointer;
    pointer-events: all;
}

.btn-ws-cont .svg-ws {
    position: absolute;
    top: calc(50% - 1.5em);
    left: calc(50% - 1.3em);
    transform: rotate(0deg) scale(1);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.btn-ws-cont-open {
    transform: rotate(360deg) scale(0) !important;
}

.btn-ws-cont .svg-close {
    transform: rotate(0deg) scale(0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

.svg-close-active {
    transform: rotate(360deg) scale(1) !important;
}

/**FINWAAS**/