body {
  font-family: "Outfit", sans-serif;
}

body.menu-open {
  transition: margin-top 0.3s ease-in-out;
  margin-top: 300px;
}

@media (min-width: 769px) {
  body.menu-open { margin-top: 0; }

  .dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  .dropdown:hover .arrow::before { transform: rotate(-45deg); top: 11px; }
  .dropdown:hover .arrow::after  { transform: rotate(46deg);  top: 11px; }
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(2, 158, 255);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  top: 0; left: 0;
  z-index: 1000;
  padding: 10px 20px;
  border-bottom: none !important;
  transition: all 0.3s ease-in-out;
  font-family: "Outfit", sans-serif;
}

.navbar.scrolled {
  background: white;
  padding: 5px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.navbar.scrolled .nav-links a { color: #2196F3; }

.navbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 250px;               
  height: 100%;
  background: #fff;
  border-bottom: none;
  backdrop-filter: blur(10px);
  z-index: -1;
  border-radius: 0 50px 50px 0;
  transition: all 0.3s ease-in-out;
}

.logo-container { display: flex; align-items: center; gap: 10px; }

.logo-link { display: flex; align-items: center; text-decoration: none; }


.logo-link img {
  height: 70px;             
  padding: 10px;
  transform: scale(1.2);    
  transform-origin: left center;
  will-change: transform;
  transition: transform 0.3s ease-in-out;
}

.logo-text {
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 1px;
  font-family: "Outfit", sans-serif;
  display: inline-flex;
}

.lt-blue  { color: #2196F3; }
.lt-black { color: #2B75E8; }

.navbar.scrolled .logo-text { font-size: 30px; }

.nav-links {
  list-style: none;
  display: flex;
  gap: 50px;
  margin: 0 auto;
  padding: 0;
  align-items: center;
}

.nav-links a {
  position: relative;
  text-decoration: none;
  font-size: 25px;
  color: white;
  font-weight: bold;
  padding: 10px 15px;
  background: transparent;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  font-family: "Outfit", sans-serif;
}

.navbar.scrolled .nav-links a { color: #2196F3; }

.nav-links a:hover { background: transparent; color: white; }

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background-color: white;
  transition: width 0.3s ease-in-out;
}
.navbar.scrolled .nav-links a::after { background-color: #2196F3; }
.nav-links a:hover::after { width: 100%; }


.arrow {
  display: inline-block;
  width: 30px; height: 30px;
  position: relative;
  margin-left: 10px;
  margin-top: 4px; top: 0;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.arrow::before, .arrow::after{
  content:"";
  position:absolute;
  width:30px; height:4px;
  background-color: currentColor;
  left:0; transform-origin:center;
  transition: transform .3s, top .3s;
}
.arrow::before{ top:8px; left:-9px; transform:rotate(45deg); }
.arrow::after { top:8px; left: 9px; transform:rotate(-45deg); }

/* Dropdown (hover y open para móviles) */
.dropdown { position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.dropdown.open .arrow::before { transform: rotate(-45deg); top: 10px; }
.dropdown.open .arrow::after  { transform: rotate(45deg);  top: 10px; }
.dropdown.open .dropdown-menu { display:block; opacity:1; transform:translateY(0); }

.dropdown-menu{
  width:auto; min-width:170px;
  background:#fff; color:#000;
  padding:5px 0; border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  display:none; position:absolute;
  top:100%; left:0;
  opacity:0; transform:translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
  z-index:1001;
}
.dropdown-menu li a{
  color:#2196F3 !important; font-weight:bold; text-decoration:none;
  padding:10px 20px; display:block; white-space:nowrap; font-family:"Outfit", sans-serif;
}
.dropdown-menu li a:hover{ color:#fff !important; background:#2195f3; }

/* hamburguesa */
.menu-toggle{
  display:none; flex-direction:column; cursor:pointer; z-index:1100;
  align-items:center; justify-content:center;
}
.menu-toggle span{
  display:block; width:30px; height:4px; margin:5px; background:#fff;
  transition: transform .3s, opacity .3s, background-color .3s;
}
.navbar.scrolled .menu-toggle span{ background:#2196F3; }
.menu-toggle.open span:nth-child(1){ transform: translateY(13px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-14px) rotate(-45deg); }

/* ====== MÓVIL  ====== */
@media screen and (max-width: 768px) {
  .menu-toggle{
    display:flex; width:40px; height:40px; border-radius:5px;
    position:absolute; right:20px; top:20px; cursor:pointer;
  }

  .nav-links{
    display:none; flex-direction:column; width:100%;
    background: rgb(2, 158, 255); backdrop-filter: blur(10px);
    position:absolute; top:80px; left:0; padding:10px 0;
    box-shadow:0 4px 6px rgba(0,0,0,.344);
  }
  .nav-links.active{ display:flex; flex-direction:column; align-items:center; }

  .nav-links a, .dropdown a, .dropdown-menu li a{ color:#fff !important; }
  .nav-links a{ padding:15px 20px; width:100%; text-align:center; }

  .dropdown{ width:100%; display:flex; flex-direction:column; align-items:center; }
  .dropdown a{ justify-content:center; width:100%; text-align:center; flex-direction:column; display:flex; padding:15px 0 5px; }
  .arrow{ margin-top:8px; margin-left:0; }

  .dropdown-menu{
    position:static !important; display:none; width:100%;
    background:transparent !important; color:#fff !important; padding:0;
    box-shadow:none !important; transform:none !important; opacity:1 !important; border-radius:0 !important;
  }
  .dropdown.open .dropdown-menu{ display:block; }
  .dropdown-menu li{ width:100%; }
  .dropdown-menu li a{ padding:12px 20px; text-align:center; background:transparent !important; width:100%; display:block; }
  .dropdown-menu li a:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
}

/* ====== TABLET  ====== */
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .navbar { padding: 8px 16px; }

  
  .navbar::before{
    width: clamp(160px, 24vw, 220px);   
    border-radius: 0 34px 34px 0;       
  }

  
  .logo-link img{
    transform: scale(1.1);              
  }

  .logo-text{ font-size: 32px; }
  .navbar.scrolled .logo-text{ font-size: 28px; }

  .nav-links{
    gap: 32px;                          
  }
  .nav-links a{
    font-size: 20px;                   
    padding: 8px 10px;
  }

  
  .arrow{ width: 24px; height: 24px; }
  .arrow::before, .arrow::after{ width: 24px; height: 3px; }
  .arrow::before{ top:7px; left:-7px; }
  .arrow::after { top:7px; left: 7px; }
}


   
.navbar.scrolled .logo-link img { transform: scale(1); }
body { font-family: "Outfit", sans-serif; }

body.menu-open{ transition:margin-top .3s ease-in-out; margin-top:300px; }
@media (min-width:769px){ body.menu-open{ margin-top:0; } }

/* Hover  desktop dropdown */
@media (min-width:769px){
  .dropdown:hover .dropdown-menu{ display:block; opacity:1; transform:translateY(0); }
  .dropdown:hover .arrow::before{ transform:rotate(-45deg); top:11px; }
  .dropdown:hover .arrow::after{  transform:rotate(46deg);  top:11px; }
}

/* =============== NAVBAR =============== */
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  background:rgb(2,158,255);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding:10px 20px; border-bottom:none !important;
  transition:all .3s ease-in-out; font-family:"Outfit",sans-serif;
}


.navbar.scrolled{ background:#fff; padding:5px 20px; border-bottom:1px solid rgba(255,255,255,.2); }
.navbar.scrolled .nav-links a{ color:#2196F3; }

.navbar::before{
  content:""; position:absolute; inset:0 auto 0 0;
  width:250px;               
  background:#fff; z-index:-1;
  border-radius:0 50px 50px 0;
  transition:all .3s ease-in-out;
}

/* =============== LOGO =============== */
.logo-container{ display:flex; align-items:center; gap:10px; }
.logo-link{ display:flex; align-items:center; text-decoration:none; }


.logo-link img{
  height:70px; padding:10px;
  transform:scale(1.2); transform-origin:left center;
  will-change:transform; transition:transform .3s ease-in-out;
}

.logo-text{
  font-size:35px; font-weight:700; letter-spacing:1px;
  font-family:"Outfit",sans-serif; display:inline-flex;
}
.lt-blue{ color:#2196F3; } .lt-black{ color:#2B75E8; }
.navbar.scrolled .logo-text{ font-size:30px; }

/* =============== LINKS =============== */
.nav-links{
  list-style:none; display:flex; gap:50px; margin:0 auto; padding:0; align-items:center;
}
.nav-links a{
  position:relative; text-decoration:none; font-size:25px; color:#fff; font-weight:700;
  padding:10px 15px; background:transparent; transition:all .3s ease-in-out;
  display:flex; align-items:center; font-family:"Outfit",sans-serif;
}
.nav-links a:hover{ background:transparent; color:#fff; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#fff; transition:width .3s ease-in-out;
}
.navbar.scrolled .nav-links a::after{ background:#2196F3; }
.nav-links a:hover::after{ width:100%; }

/* Desactivar “Cotizador”  */
.nav-links li.nav-item--cotizador,
.nav-links a[href*="cotizador" i],
.nav-links li:has(> a[href*="cotizador" i]){
  display:none !important;
}


.arrow{
  display:inline-block; width:30px; height:30px; position:relative;
  margin-left:10px; margin-top:4px; top:0; transform:rotate(0deg);
  transition:transform .3s ease;
}
.arrow::before,.arrow::after{
  content:""; position:absolute; width:30px; height:4px; background:currentColor; left:0;
  transform-origin:center; transition:transform .3s, top .3s;
}
.arrow::before{ top:8px; left:-9px; transform:rotate(45deg); }
.arrow::after { top:8px; left: 9px; transform:rotate(-45deg); }


.dropdown{ position:relative; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.dropdown.open .arrow::before{ transform:rotate(-45deg); top:10px; }
.dropdown.open .arrow::after { transform:rotate(45deg);  top:10px; }
.dropdown.open .dropdown-menu{ display:block; opacity:1; transform:translateY(0); }

.dropdown-menu{
  width:auto; min-width:170px; background:#fff; color:#000; padding:5px 0; border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,.1); display:none; position:absolute; top:100%; left:0;
  opacity:0; transform:translateY(-10px); transition:opacity .4s ease, transform .4s ease; z-index:1001;
}
.dropdown-menu li a{
  color:#2196F3 !important; font-weight:700; text-decoration:none; padding:10px 20px; display:block; white-space:nowrap;
}
.dropdown-menu li a:hover{ color:#fff !important; background:#2195f3; }

/*  hamburguesa */
.menu-toggle{ display:none; flex-direction:column; cursor:pointer; z-index:1100; align-items:center; justify-content:center; }
.menu-toggle span{ display:block; width:30px; height:4px; margin:5px; background:#fff; transition:transform .3s, opacity .3s, background-color .3s; }
.navbar.scrolled .menu-toggle span{ background:#2196F3; }
.menu-toggle.open span:nth-child(1){ transform:translateY(13px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-14px) rotate(-45deg); }

/* =============== MÓVIL =============== */
@media (max-width:768px){
  .menu-toggle{
    display:flex; width:40px; height:40px; border-radius:5px;
    position:absolute; right:20px; top:20px; cursor:pointer;
  }

  .nav-links{
    display:none; flex-direction:column; width:100%;
    background:rgb(2,158,255); backdrop-filter:blur(10px);
    position:absolute; top:80px; left:0; padding:10px 0;
    box-shadow:0 4px 6px rgba(0,0,0,.344);
  }
  .nav-links.active{ display:flex; align-items:center; }
  .nav-links a,.dropdown a,.dropdown-menu li a{ color:#fff !important; }
  .nav-links a{ padding:15px 20px; width:100%; text-align:center; }

  .dropdown{ width:100%; display:flex; flex-direction:column; align-items:center; }
  .dropdown a{ justify-content:center; width:100%; text-align:center; flex-direction:column; display:flex; padding:15px 0 5px; }
  .arrow{ margin-top:8px; margin-left:0; }

  .dropdown-menu{
    position:static !important; display:none; width:100%; background:transparent !important; color:#fff !important;
    padding:0; box-shadow:none !important; transform:none !important; opacity:1 !important; border-radius:0 !important;
  }
  .dropdown.open .dropdown-menu{ display:block; }
  .dropdown-menu li{ width:100%; }
  .dropdown-menu li a{ padding:12px 20px; text-align:center; background:transparent !important; width:100%; display:block; }
  .dropdown-menu li a:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; }
}


@media (min-width:769px) and (max-width:912px){
  .navbar{ padding:8px 14px; }
  .navbar::before{
    width:clamp(140px, 26vw, 200px);
    border-radius:0 28px 28px 0;   
  }
  .logo-link img{ transform:scale(1.08); } 
  .logo-text{ font-size:30px; }
  .navbar.scrolled .logo-text{ font-size:26px; }
  .nav-links{ gap:28px; }
  .nav-links a{ font-size:19px; padding:8px 10px; }
  .arrow{ width:24px; height:24px; }
  .arrow::before, .arrow::after{ width:24px; height:3px; }
  .arrow::before{ top:7px; left:-7px; } .arrow::after{ top:7px; left:7px; }
}


@media (min-width:913px) and (max-width:1180px){
  .navbar{ padding:8px 16px; }
  .navbar::before{
    width:clamp(160px, 22vw, 230px);
    border-radius:0 34px 34px 0;
  }
  .logo-link img{ transform:scale(1.1); }
  .logo-text{ font-size:32px; }
  .navbar.scrolled .logo-text{ font-size:28px; }
  .nav-links{ gap:34px; }
  .nav-links a{ font-size:21px; padding:8px 12px; }
}


.navbar.scrolled .logo-link img{ transform:scale(1); }