:root {
    --primary: #007BFF;
    --secondary: #FF6B35;
    --dark: #121212;
    --light: #f8f9fa;
    --turquesa: #00D4FF;
    --dorado: #FFD700;
    --marino: #0f172a;
    --arena: #FFF8E7;
}

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

.navbar {
    background: rgba(18, 18, 18, 0.95) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/221540/pexels-photo-221540.jpeg?auto=compress&cs=tinysrgb&w=1920') center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    color: white;
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark);
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 6px;
    background: var(--secondary);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
}

.icon-box i {
    font-size: 4rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
}

.project-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.4s;
}
.project-card:hover {
    transform: translateY(-15px) scale(1.03);
}
.project-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
    padding: 2rem 1rem 1rem;
    text-align: center;
}

.testimonial-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    text-align: center;
    font-size: 1.1rem;
    font-style: italic;
    margin: 1rem;
}


/* Estilo para el contenedor del logo en el navbar */
.navbar-brand {
    display: flex;
    align-items: center; /* Centra verticalmente logo y texto */
    padding: 0;
}

.navbar-brand img {
    height: 75px; /* Ajuste ligeramente mayor para visibilidad */
    width: auto;
    transition: all 0.3s ease; /* Suavidad si decides animarlo */
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2)); /* Le da profundidad al logo */
}

/* Estilo para el texto del grupo */
.navbar-brand span {
    font-size: 1.5rem; /* Ajusta el tamaño de GRUPO DAXT */
    letter-spacing: 1px; /* Espaciado entre letras más elegante */
    margin-left: 10px;
}


.testimonial-card strong {
    color: var(--secondary);
    font-weight: 600;
    margin-top: 1rem;
    display: block;
}

.swiper-pagination-bullet-active {
    background: var(--secondary) !important;
}

/* Base de todos los botones */
.floating-btn-base {
    position: fixed;
    width: 60px;
    height: 60px;
    right: 10px;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 24px;
    line-height: 60px;
    transition: background-color 0.3s ease;
}

/* WhatsApp */
.floating-btn {
    bottom: 40px;
    background-color: rgba(0, 215, 87, 1);
}

/* Instagram */
.floating-btn-insta {
    bottom: 120px;
    background-color: rgba(215, 46, 138, 1);
}

/* Facebook */
.floating-btn-fb {
    bottom: 200px;
    background-color: rgba(8, 102, 255, 1);
}

/* Hovers (siguen igual) */
.floating-btn:hover {
    background-color: rgba(0, 215, 87, 1);
}

.floating-btn-insta:hover {
    background-color: rgba(215, 46, 138, 1);
}

.floating-btn-fb:hover {
    background-color: rgba(8, 102, 255, 1);
}

 #loading {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spinner {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid rgba(215, 46, 138, 1);
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
  }

  /* customizable snowflake styling */
.snowflake {
  color: rgba(250, 251, 252, 0.7);
  font-size: 2em;
}

.snowflake,.snowflake .inner{
    animation-iteration-count:infinite;
    animation-play-state:running
}
@keyframes snowflakes-fall
{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}
@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}
.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}
.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}
.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}
.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}
.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}
.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}
.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}
.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}
.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}
.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}


/* Responsive */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .section-title { font-size: 2.2rem; }
}