:root {
    --color-rosa: #e21e80;
    --color-azul: #1e30f3 !important;
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #1ab152;
    --color-texto: #333;
    --color-blanco: #fff;
    --color-sombra: rgba(0, 0, 0, 0.1);
    --color-gradient-start: #4a148c;
    --color-gradient-end: #1a237e;
}

/* Estilos base */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-texto);
}

/* Componente de WhatsApp flotante */
.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: var(--color-whatsapp);
    color: var(--color-blanco);
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.float:hover {
    background-color: var(--color-whatsapp-hover);
    color: var(--color-blanco);
    animation: shake 1s infinite;
}

.my-float {
    margin-top: 16px;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    20%, 60% { transform: rotate(5deg); }
    40%, 80% { transform: rotate(-5deg); }
}

/* Colores de texto */
.text-rosa { color: var(--color-rosa); }
.text-azul { color: var(--color-azul); }

/* Efecto cristal */
.cristal {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1.5px solid rgba(209, 213, 219, 0.3);
}

/* Botones con efecto vidrio */
.glass-rosa, .glass-azul {
    position: relative;
    display: inline-block;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 1px 4px -2px var(--color-texto);
    text-shadow: 0 -1px var(--color-texto);
    color: var(--color-blanco);
    transition: all 0.3s ease;
}

.glass-rosa {
    background-color: var(--color-rosa);
    background-image: linear-gradient(var(--color-rosa), var(--color-rosa));
}

.glass-azul {
    background-color: var(--color-azul);
    background-image: linear-gradient(var(--color-azul), var(--color-azul));
}

.glass-rosa:hover {
    background: linear-gradient(var(--color-blanco), var(--color-blanco));
    color: var(--color-rosa);
}

.glass-azul:hover {
    background: linear-gradient(var(--color-blanco), var(--color-blanco));
    color: var(--color-azul);
}

.glass-rosa:after, .glass-azul:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

/* Tarjetas de paquetes */
.bg-card-res-rosa-cris {
    border: solid 2px transparent;
    border-radius: 20px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.bg-card-res-rosa, .bg-card-res-azul {
    border: solid 2px transparent;
    border-radius: 20px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(var(--color-blanco), var(--color-blanco));
}

.bg-card-res-rosa {
    background-image: 
        linear-gradient(var(--color-blanco), var(--color-blanco)),
        linear-gradient(180deg, var(--color-rosa), var(--color-blanco), var(--color-rosa));
}

.bg-card-res-azul {
    background-image: 
        linear-gradient(var(--color-blanco), var(--color-blanco)),
        linear-gradient(180deg, var(--color-azul), var(--color-blanco), var(--color-azul));
}

/* Encabezados y pies de tarjetas */
.bg-card-header-res-azul, .bg-card-header-res-rosa {
    background: transparent;
    font-size: 2rem;
    border: none;
}

.bg-card-header-res-azul { color: var(--color-rosa); }
.bg-card-header-res-rosa { color: var(--color-azul); }

.bg-card-footer-res-rosa, .bg-card-footer-res-azul {
    background: transparent;
    font-size: 1rem;
    font-weight: bolder;
    border: none;
}

.bg-card-footer-res-rosa { color: var(--color-rosa); }
.bg-card-footer-res-azul { color: var(--color-azul); }

/* Cuerpos de tarjetas */
.bg-card-body-precio-residencial-azul,
.bg-card-body-pesos-residencial-azul {
    font-size: 1rem;
    color: var(--color-azul);
}

/* Encabezados */
.header-azul, .header-rosa {
    position: relative;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0 1px 4px -2px var(--color-texto);
    text-shadow: 0 -1px var(--color-texto);
    color: var(--color-blanco);
}

.header-azul { background-color: var(--color-azul); }
.header-rosa { background-color: var(--color-rosa); }

/* Precios */
.price-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.currency {
    font-size: 0.6em;
    font-weight: normal;
}

/* Fondos */
.bg-blue {
    background: linear-gradient(45deg, 
        var(--color-azul), var(--color-azul), var(--color-azul), 
        var(--color-azul), var(--color-azul), var(--color-azul), var(--color-azul));
}

.bg-pink {
    background: linear-gradient(45deg, 
        var(--color-rosa), var(--color-rosa), var(--color-rosa), 
        var(--color-rosa), var(--color-rosa), var(--color-rosa), var(--color-rosa));
}

/* Carousel */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e21e80'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e21e80'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
}

/* Navbar */
.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.z1 { z-index: -30; }

/* Mejoras adicionales */
@media (max-width: 768px) {
    .float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 20px;
        right: 20px;
    }
    
    .my-float {
        margin-top: 12px;
    }
    
    .bg-card-header-res-azul, 
    .bg-card-header-res-rosa {
        font-size: 1.5rem;
    }
}