:root {
    /*COLORING*/
    --accent-color: rgba(234,31,95,1);
    
    /*NAV SETTINGSS*/
    --nav-contacto-height:40px;
    --nav-menu-height: 80px;
    --nav-menu-mobile-height: 60px;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-menu-height);
    font-family: Poppins;
}

body {
    background:#fff;
    color:#fff;
    background-image:url('../images/background3.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    overflow:hidden;
    
}

#wrapper {
    width:100%;
    min-height:100dvh;
    overflow:hidden;
}

#loader-container {
    position:absolute;
    width:100%;
    height:100vh;
    inset:0;
    background-color:#fff;
    display:flex;
    align-items: center;
    justify-content: center;
    opacity:1;
    transition: opacity 300ms ease-in-out;
    z-index:9999;
    
}

.loader {
    height: 4px;
    width: 130px;
    --c:no-repeat linear-gradient(var(--accent-color) 0 0);
    background: var(--c),var(--c),#fcb8d2;
    background-size: 60% 100%;
    animation: l16 2s infinite;
  }
  
  @keyframes l16 {
    0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}
  }

nav {
    height: calc(var(--nav-contacto-height) + var(--nav-menu-height));
    font-family: Poppins;
    font-size:9pt;
    display:flex;
    flex-direction: column;
    color:rgba(205,205,205,0.7);
    position:fixed;
    top:0;
    width:100%;
    z-index:5;
    border-bottom:1px solid rgba(255,255,255,0.2);
    background-color:rgba(0,0,0,0.05);
    transition: background-color 400ms ease-in-out, top 400ms ease-in-out;
}

.white {
    color:#fff;
}

nav i {
    font-size:10pt;
}

nav i.margin-right {
    margin-right:.7em;
}

nav i.big {
    font-size:13pt;
   }

@media (hover: hover) {
    nav:hover {
      background-color:rgba(0,0,0,0.5);
    }
}

.black {
    background-color:rgba(0,0,0,1) !important;
}

nav .nav-contacto {
    height:var(--nav-contacto-height);
    width:100%;
    border-bottom:1px solid rgba(255,255,255,0.2);
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-inline:3em;
    overflow: hidden;
}

nav .nav-contacto a {
    color:rgba(205,205,205,0.7);
    display:flex;
    align-items: center;
    justify-content: center;
    padding-inline:2em;
    height:100%;
    border-right:1px solid rgba(255,255,255,0.2);
    transition: color 200ms ease-in-out, background-color 200ms ease-in-out;
}

@media (hover: hover) {
nav .nav-contacto a:hover {
    color:#fff;
}
nav .instagram:hover {
    background-color:rgba(234,31,95,0.3);
}

nav .whatsapp:hover {
    background-color:rgba(0, 218, 91, 0.3);
}
}

nav .nav-contacto a:nth-child(1) {
    padding-left:0;
}

nav .nav-contacto a:nth-child(4) {
    /*padding-right:0;*/
}

nav .nav-contacto a:last-child,
nav .nav-contacto a:nth-child(2) {
    border-right:0;
}

nav .nav-contacto a:nth-child(3) {
    margin-left: auto;
  }

nav .nav-menu {
    height: var(--nav-menu-height);
    width:100%;
    padding-inline:3em;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

nav .nav-menu .nav-menu-logo {
    height:50px;
    cursor:pointer;
}

nav .nav-menu .nav-menu-menu {
    display:flex;
    gap:3em;
    font-weight:bold;
    position:relative;
}

nav .nav-menu .nav-menu-menu .nav-menu-menu-item {
    font-size:9pt;
    position:relative;
    cursor:pointer;
    color:rgba(255,255,255,0.7);
    transition: color 0.3s ease-in-out;
}

nav .nav-menu .nav-menu-menu .nav-menu-menu-item::after {
    content:'';
    display:block;
    position:absolute;
    bottom:-2px;
    left:0;
    height:1px;
    background-color:var(--accent-color);
    width:0;
    transition: width 0.3s ease-in-out;
}

@media (hover: hover) {
nav .nav-menu .nav-menu-menu .nav-menu-menu-item:hover,
nav .nav-menu .nav-menu-menu .nav-menu-menu-item.active {
    color: rgba(255, 255, 255, 1);
}

nav .nav-menu .nav-menu-menu .nav-menu-menu-item:hover::after,
nav .nav-menu .nav-menu-menu .nav-menu-menu-item.active::after {
    width: 100%;
}}

nav .nav-menu #nav-hamburger-menu {
    display:none;
}

nav .nav-menu #nav-menu-mobile {
    position:absolute;
    right:0;
    max-height:0;
    transition: max-height 500ms ease;
    width:50%;
    overflow:hidden;
    top: var(--nav-menu-mobile-height);
    background-color:rgba(0,0,0,0.6);
    padding-block:0;
    padding-inline:1em;
    border-left: 5px solid var(--accent-color);
}

nav .nav-menu #nav-menu-mobile .nav-menu-mobile-links {
    position:relative;
    padding-block: 2em;
    display:flex;
    align-items: flex-end;
    flex-direction: column;
    gap:.5em;
    width:100%;
    top:-300px;
    transition: top 400ms ease-out;
}

nav .nav-menu #nav-menu-mobile .nav-menu-mobile-item {
    font-size:1.5em;
    font-weight:bold;
    position:relative;
    color:rgba(255,255,255,0.9);
}

nav .nav-menu #nav-menu-mobile.is-open {
    max-height: 500px;
    
}

nav .nav-menu #nav-menu-mobile.is-open .nav-menu-mobile-links {
    top:0;       
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index:0;
}


header, section {
    font-family: Archivo;
}


header {
    background: rgb(7,131,210);
    background: linear-gradient(90deg, rgba(7,131,210,1) 0%, rgba(234,31,95,1) 100%);
    background-image: url('../images/background2.jpg');
    background-size: cover;
    background-position: 50% 50%;
    width:100%;
    height:100dvh;
    padding-left:10%;
    color:#fff;
    border:0;
    position:relative;
    display:flex;
    align-items: center;
    transition: background-position 1s ease-in-out, top 1s ease-out;
    overflow:hidden;
    top:2vh;
    /*height:0;*/
}

#logo-container {
    z-index:2;
    position:relative;
}

.logo-subcontainer {
    position:relative;
    display:inline-block;
    width:auto;
}


header .logo-circle {
    border-radius: 50%;
    width: 43%;
    border: .8rem solid rgba(255,255,255,0.3);
    position: absolute;
    top: -66%;
    left: -10%;
    aspect-ratio: 1 / 1;
    animation: scale 10s ease-in-out infinite;  
    transform: scale(0);

}
  
@keyframes scale {
    0% {
        transform: scale(0);
    }
    10% {
      transform: scale(1);
    }
    40% {
        transform: scale(0.95);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(0.9);
        }
    95% {
        transform: scale(0.95);
    }    
    100% {
        transform: scale(0);
    }
  }

@media screen and (max-width: 768px) {
    html {
        scroll-padding-top: var(--nav-menu-mobile-height);
    }
    
    nav .nav-contacto {
        display:none;
    }

    nav, nav .nav-menu {
        height:var(--nav-menu-mobile-height);
    }

    nav .nav-menu {
        padding-inline:1em;
    }

    nav .nav-menu .nav-menu-menu {
        display:none;
    }

    nav .nav-menu .nav-menu-logo {
        height: 40px;
    }

    nav .nav-menu #nav-hamburger-menu {
        display:flex;
    }
    
    header {
        background-position: 62% 50%;
        justify-content: center;
        padding-left: 0
    }

}

#nav-whatsapp a i {
    font-size:1.6rem;
    margin-right:.2em;
    color:rgba(255,255,255,0.7);
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 
            0 0 5px rgba(255, 255, 255, 0.5), /* Softer white glow */
            0 0 10px rgba(230, 0, 115, 0.5),  /* Softer pink glow */
            0 0 15px rgba(230, 0, 115, 0.5);  /* Softer pink glow */
    }
    to {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.5), /* Softer white glow */
            0 0 20px rgba(255, 77, 166, 0.5),  /* Softer pink glow */
            0 0 30px rgba(255, 77, 166, 0.5);  /* Softer pink glow */
    }
}

header .logo {
    width:clamp(14rem, 25vw, 35rem);;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.15));    
    margin-bottom:.5em;
}

header p.logo-slogan {
    display:inline-block;
    font-size:clamp(.6rem, 1vw, 1.2rem);
    line-height:1.2em;
    margin-bottom:1em;
    font-family:Raleway;
    border-right:3px solid #fff;
    padding-right:2px;
    width:100%;
    white-space: nowrap;
    overflow:hidden;
    animation:
    typing 3s steps(58),
    cursor 500ms step-end infinite alternate;
}

header::after,
header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgb(105 0 205 / 30%) 50%, rgba(0,0,0,0) 100%);
    transition: opacity 500ms;
    pointer-events: none;
}

header::before {
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgb(180 0 0 / 30%) 50%, rgba(0,0,0,0) 100%);
    animation: fade 5s infinite alternate;
}

@keyframes fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media screen and (max-width: 768px) {
    #logo-container {
        background: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
        padding-inline: 100vw;
        padding-block: 4em;
    }
    header .logo-circle {
        border: 0.6rem solid rgba(255,255,255,0.3);
    }
}



@keyframes typing {
    0%  { width: 0%; color:rgba(255,255,255,0); }
    19% { width: 0%; color:rgba(255,255,255,0); }
    20% { width: 0%; color:rgba(255,255,255,1); }
    to { width: 100% }
  }
  
  @keyframes cursor {
    50% { border-color: transparent; }
  }

header button {
    font-size:clamp(.7rem, 2vw, .9rem);
    border:1px solid rgba(255,255,255,0.5);
    padding:1em;
    border-radius:15px;
    background-color:rgba(234,31,95,0.1);
    color:#fff;
    cursor:pointer;
    transition: background-color 200ms;
}

@media (hover: hover) {
header button:hover {
    background-color:rgba(234,31,95,0.9);
    border:1px solid rgba(255,255,255,.8);
}}

header #arrow-down-container {
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    color:rgba(255,255,255,0.8);
}

header #arrow-down-container i {
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {opacity:1;}
    50% {opacity:0;}
}



section {
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    font-family:Poppins;
}

.padded-container {
    padding-block:4em;
    padding-inline:2em;
    display:block;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .padded-container {
        padding-block: 2em;
    }
}

.section-white {
    background-color:rgba(255,255,255,0.9);
    color:#000;
}

.section-black {

    background-color:rgba(17,17,17,0.9);
    color:#eee;
}

.section-accent {
    /*background-color:var(--accent-color);*/
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(234,31,95,0.8) 50%);
    color:#eee;
}


section h1 {
    font-size:clamp(1.5rem, 10vw, 6rem);
    letter-spacing: -0.05em;
    text-align:center;
}

section h1::after {
    margin: 0 auto;
    padding-top:0;
    display:block;
    content:'';
    width:20%;
    border-bottom:2px solid var(--accent-color);
    margin-bottom:.4em;
}

section p {
    text-align:center;
    font-family:Raleway;
    margin:0 auto;
    font-size:clamp(1.2rem, 10vw, 1rem);
    margin-bottom: .5em;
    width:75%;
}

.section ul {
    list-style-position: inside;
    list-style-type: square;
}

.section li {
    font-size:clamp(1.2rem, 2vw, 1.3rem);
}

.section-separator {
    padding:0;
    margin:0;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.section-separator img {
    width:calc(100% /3);
}

@media screen and (max-width: 768px) {
    .section-separator {
        flex-direction: column;
    }
    .section-separator img {
        width:100%;
    }
    section p {
        width:100%;
    }
    
}

footer {
    display:block;
    width:100%;
    overflow:hidden;
    margin-top:-1px;
}

footer section h1::after {
    border-bottom:2px solid #fff;
}

.footer-logo {
    border-top:1px solid #fff;
    padding-top:2em;
    width:20%;
    opacity:0.7;
    margin-top:.3em;
}

.footer-contacto {
    padding-block:2em;
}

.footer-contacto-direccion {
    font-size:clamp(.7em,3vw, 1.4em);
    line-height:1.3em;
}

.footer-contacto-telefono {
    display:inline-block;
    padding-inline:1em;
    border-radius:10px;
    margin-top:.5em;
    font-size:clamp(1.2em,8vw, 1.8em);
    font-weight:bold;
    letter-spacing: -0.05em;
    background-color:rgba(255,255,255,0.1);
    color:#fff;
    animation: background 2s ease-in-out infinite;
}

.footer-contacto-telefono a {
    color:#fff;
}

@keyframes background {
    0% {background-color:rgba(255,255,255,0)}
    50% {background-color:rgba(255,255,255,0.1)}
    100% {background-color:rgba(255,255,255,0)}
}

.footer-contacto-redes {
    font-size:clamp(1.5em,8vw, 1.4em);
    opacity:0.8;
}

.footer-contacto-redes a {
    color:#fff;
}

    


@media screen and (max-width: 768px) {
    .footer-logo {
        width:40%;
    }
}

.subtitle {
    width:auto;
    margin:0 auto;
    display:inline-block;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
    text-align:center;
    margin-top:1em;
    margin-bottom:1em;
}

#logos {
    margin-top:2em;
    display:flex;
    justify-content: center;
    align-items:flex-start;
    flex-wrap: wrap;
    gap:1em;
    width:90%;
    margin:0 auto;
    margin-bottom:2em;
}

#logos label {
    cursor:pointer;
    border-radius:10px;
    padding:.2em;
    border: 1px solid rgba(255,255,255,0.03);
    background-color:rgba(255,255,255,0); 
}

#logos label img {
    max-width:150px;
    min-width:150px;
    mix-blend-mode: screen;
    filter:saturate(0);
    opacity:0.5;
    transition: filter 200ms ease-in-out, opacity 300ms ease-in-out;
}

#logos input[type="radio"] {
    display:none;
}

#logos input[type="radio"]:checked + label {
    background-color:rgba(255,255,255,0.03);
}

#logos input[type="radio"]:checked + label img {
  filter:saturate(1);
  opacity:1;
}

.animation-tilt {
    animation: tilt 300ms forwards;
    width: auto;
    height: auto;
}

@keyframes tilt {
    0% { background-color:rgba(255,255,255,0); }
    10% { background-color:rgba(255,255,255,0.05);  }
    20% { background-color:rgba(255,255,255,0); }
    30% { background-color:rgba(255,255,255,0.03);  }
    100%{ background-color:rgba(255,255,255,0.03);  }
    
 }

 @media screen and (max-width: 768px) {
    #logos {
        width:100%;
        gap:.3em;
    }

    #logos label img {
        max-width:100px;
        min-width:100px;
    }
 }

 .tippy-box {
   background-color:rgba(50,50,50,0.8);
 }

 .tippy-content {
    color:rgba(255,255,255,0.7);
    font-size:.9em;
 }

 #trabajos {
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items:center;
    justify-content: center;
}

#trabajos .img-container {
    overflow:hidden;
    height:150px;
    width:auto;
}

#trabajos img {
    cursor:pointer;
    transform:scale(1);
    transition: transform 300ms ease-in-out;
}

#trabajos img:hover {
  transform: scale(1.1);
}

 #video-player {
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content: center;
    z-index:100;
    position:fixed;
    background-color:rgba(0,0,0,0.9);
    bottom:0;
    left:0;
    width:100vw;
    height:0vh;
    filter:blur(3px);
    transition: height 300ms ease-in-out, filter 300ms ease-in-out;
    transition-delay: 0s, 300ms;
 }

 #video-player.active {
    filter:blur(0);
    height:100vh;
 }

 #video-player-toolbar {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color:#000;
    border-bottom:1px solid var(--accent-color);
    display:flex;
    align-items:center;
    justify-content: space-between;
 }

 #video-player-info {
    color:#fff;
    margin-left:1em;
    display: flex;
    align-items:baseline;
    gap:1em;
 }

 #video-player-info #video-player-title {
    font-size:clamp(1.3rem, 10vw, 1rem);
 }

 #video-player-info #video-player-brand-year {
    font-size:clamp(0.6em, .8vw, 1rem);
    color:rgba(255,255,255,0.6);
 }

  #video-player-close-button {
    height:50px;
    color:#fff;
    background-color:rgba(155,155,155,0.3);
    padding:1em;
    display:flex;
    align-items:center;
    justify-content: center;
    cursor:pointer;
 }

 #video-player-iframe {
    width:80%;
    height:80%;
    background-color:rgba(100,100,100,0.5);
 }

 @media screen and (max-width: 768px) {
    #video-player-iframe {
        width:100%;
     }
 }

 #servicios {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 3em; /* Spacing between items */
    width:90%;
    margin-top:4em;
 }


  @media (max-width: 1000px) {
    #servicios {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Small screens: 1 column */
  @media (max-width: 768px) {
    #servicios {
      grid-template-columns: 1fr;
    }
  }

 
#servicios .servicio-card {
    display:flex;
    flex-direction: row;
    align-items:flex-start;
    justify-content: flex-start;
    gap:1em;
}

#servicios .servicio-text {
    display:flex;
    flex-direction: column;
    gap:1em;
    text-align: justify;
    hyphens: auto;
    font-size:clamp(0.4rem, 10vw, 0.9rem);
}

#servicios .servicio-titulo {
    font-size:clamp(0.6rem, 10vw, 1.1rem);
    font-weight:bold;
    text-align:left;
}

#servicios .servicio-icono {
    color:var(--accent-color);
}

#servicios .servicio-icono svg {
    min-width:70px;
    height:70px;
}

#servicios .servicio-icono svg.svg-60  {
    width:60px;
    height:60px;
}


#servicios .servicio-icono svg.svg-stroke path {
    stroke: var(--accent-color);
}

#servicios .servicio-icono svg.svg-fill path {
    fill: var(--accent-color);
}



#section-equipo {
    display:flex;
} 

#equipo {
    display:flex;
    align-items:center;
    justify-content: center;
    flex-wrap:wrap;
    width:90%;
    gap:.4em;
    margin-top:2em;
 }

 #equipo .miembro-card {
    position:relative;
    cursor:default;
 }

 #equipo .miembro-card .miembro-foto {
    width:25%;
    max-width:300px;
 }
 
 #equipo .miembro-card .miembro-foto img {
    width:300px;   
 }

 #equipo .miembro-info {
     cursor:default;
    overflow:hidden;
    position:absolute;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    top:0;
    left:0;
    width:100%;
    height:0;
    background-color:rgba(0,0,0,0.8);
    font-size:clamp(1.5rem, .8vw, 1rem);
    line-height:1.5em;
    transition: height 700ms cubic-bezier(.1,.5,.45,.95);
 }

#equipo .miembro-info span::before {
  content:'';
  display:block;
  margin:0 auto;
  height:2px;
  width:0;
  background-color:var(--accent-color);
  margin-top:1em;
  margin-bottom:1em;
  transition: width 700ms ease-in-out;
  transition-delay: 300ms;
 }
 
 #equipo .miembro-card span {
    font-weight:normal;
    font-size:clamp(.7rem, .8vw, 1rem);
    line-height:1.3em;
    transition: color 500ms ease-in-out;
    transition-delay: 500ms;
    color:rgba(255,255,255,0);
 }

#equipo .miembro-card:hover .miembro-info {
    height: 400px;
}

#equipo .miembro-card:hover .miembro-info span::before {
    width: 50px
}

#equipo .miembro-card:hover .miembro-info span {
    color:rgba(255,255,255,0.6);
}