@font-face{
  font-family: 'Blatant';
  src: url(./Fonts/Blatant.otf);
  font-weight: lighter;
  font-style: normal;
}

:root{
  /* NAV */
  --nav-item-h: 48px;     /* alto uniforme de los botones */
  --nav-item-px: 1rem;    /* padding horizontal */
  --nav-gap: .10rem;      /* separación entre items */

  /* Footer icons */
  --icon-size-lg: 70px;   /* desktop */
  --icon-size-md: 56px;   /* tablet */
  --icon-size-sm: 48px;   /* mobile */
}

body{
  font-family: "Blatant";
  color: #fff;
}

/* Parallax */
.parallax-effect{
  background-image: url("./Images/backgroundsImages/N_Background_Opacity.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Scroll suave y offset para anclas bajo navbar fija */
html{
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
#services,#Nosotros{ scroll-margin-top: 6rem; }

/* NAV */
#logo{ height: 75px; padding-left: 2em; }

.nav-link,.dropdown-item{
  color:#fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: background-color .2s ease, color .2s ease;
}

/* hover */
.nav-link:hover{ background:#212529; }

/* estado abierto/activo */
#navbar-tool .nav-link:focus,
#navbar-tool .nav-link:active,
#navbar-tool .nav-link.show{
  background:#fff; color:#222d69;
}

/* Dropdown oscuro base */
.dropdown-menu.bg-dark .dropdown-item{ color:#e7ecef; }
.dropdown-menu.bg-dark .dropdown-item:hover,
.dropdown-menu.bg-dark .dropdown-item:focus{
  color:#fff; background: rgba(255,255,255,.12);
}
.dropdown-menu.bg-dark .dropdown-item.active,
.dropdown-menu.bg-dark .dropdown-item:active{
  color:#111; background:#fff;
}

/* NAV: alto uniforme y separación */
#navbar-tool .navbar-nav{ gap: var(--nav-gap); }
#navbar-tool .nav-item{ display:flex; align-items:stretch; }
#navbar-tool .nav-link{
  padding-top:0!important; padding-bottom:0!important;
  padding-left:var(--nav-item-px)!important; padding-right:var(--nav-item-px)!important;
  height:var(--nav-item-h); display:inline-flex; align-items:center; line-height:1; border-radius:2px;
}
#navbar-tool .dropdown-toggle::after{ margin-left:.5rem; }

/* Contacto botón */
#contact-button{ background:transparent; border:0; }
#contact-button>.nav-link{
  background:#222d69; border:1px solid #fff; height:var(--nav-item-h);
  padding-left:var(--nav-item-px)!important; padding-right:var(--nav-item-px)!important;
}
#navbar-tool .nav-link:hover{ background:#151a21; }
#navbar-tool .nav-link.show,
#navbar-tool .nav-link:active,
#navbar-tool .nav-link:focus{ background:#fff; color:#222d69; }

/* ===== REGLAS CLAVE DEL DROPDOWN (ARREGLO ESPACIOS/ANCHO) ===== */
#navbar-tool .nav-item.dropdown{ position:relative; }

/* Menú pegado al botón, sin huecos y con ancho correcto */
#navbar-tool .nav-item.dropdown > .dropdown-menu{
  /* quitar el espacio superior de Bootstrap */
  --bs-dropdown-spacer: 0 !important;
  /* que el ancho mínimo sea el del botón */
  --bs-dropdown-min-width: 100%;
  min-width: 100% !important;

  position: absolute;
  top: 100% !important;
  left: 0 !important;
  transform: none !important;

  /* sin margen/padding que muestre el fondo de la página */
  margin: 0 !important;
  padding: 0 !important;

  /* si el texto es largo, el menú puede crecer (hasta 90vw) */
  width: max(100%, 18rem) !important;
  max-width: 90vw;
  box-sizing: border-box;

  border: 0;
  border-radius: 0 0 6px 6px;
  background-color: #1a1e23;
  overflow: hidden;              /* evita “asomar” resaltes */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Items: ocupan 100% del fondo negro */
#navbar-tool .dropdown-menu .dropdown-item{
  display:flex; align-items:center;
  width: 100%; box-sizing: border-box;
  min-height: var(--nav-item-h);
  padding: .75rem var(--nav-item-px);
  white-space: nowrap;          /* 1 línea, no se sale */
  overflow: hidden;             /* oculta cualquier sobrante visual */
  text-overflow: ellipsis;      /* si quedara muy largo, agrega “…” */
}

/* WhatsApp flotante */
.btn-wsp{
  position:fixed; width:60px; height:60px; bottom:20px; right:20px;
  background:#222d69; color:#FFF; border-radius:50px; text-align:center; font-size:30px; z-index:100; filter:contrast(.8);
}
.btn-wsp:hover{ text-decoration:none; color:#222d69; background:#fff; }
.whatsapp-icon{ margin-top:13px; }

/* Carousel */
#sliderTittles{ font-size:97px!important; }
#sliderCaptions{ font-size:30px!important; }

/* slide especial “Asesoría Estratégica” (si lo usás) */
#myCarousel h2#sliderTittles.slider-asesoria{
  font-size:90px!important; line-height:1.1; padding:0 .75rem; max-width:90vw;
}

.carousel-item{
  height:100vh; width:100vw; background-color:#21252909; color:#fff;
  position:relative; background-position:center; background-size:cover;
}

/* variante responsiva para títulos puntuales */
h2#sliderTittles.slider-sm{
  font-size:clamp(1.75rem,6vw,56px);
  line-height:1.1; margin:0; padding:0 .5rem; max-width:90vw;
}

/* Carousel position */
.container-carousel{
  position:absolute; bottom:0; left:0; right:0;
  padding-bottom:65px; padding-left:40%;
}
.overlay-image{
  position:absolute; inset:0; background-position:center; background-size:cover; opacity:1;
}

/* Botón carrusel */
#carrousel-btn{
  border-radius:0; box-shadow:0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19); color:#FFF;
}
#carrousel-btn>a{ color:#FFF; }

/* About us */
.about-line{ width:3%; height:8px; background:#fff; }

/* Cards */
#cards{ width:50vh; height:210px; background-size:cover; background-position:center; background-repeat:no-repeat; border:4px solid #fff; }
#card-frame{
  width:50vh; height:200px; border:3px solid #fff; background-position:center; background-size:cover; background-clip:padding-box;
  transform:skewX(-8deg); transition:.5s; box-shadow:0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);
}
#card-frame:hover{ width:40vh; height:200px; transform:scale(1.2); }
.text-card{ font-size:35px; text-align:center; margin:10px auto 0; color:#fff; background:#222d6934; }
#btn-card{
  background:transparent; border:2px solid #222d69; color:#FFF; cursor:pointer; position:absolute; right:5px; bottom:2px;
}
.text-card:hover{ visibility:visible; }

/* Steps */
.step-row{ align-items:center; }
.step-number{ font-size:clamp(2.25rem,6vw,4rem); line-height:1; margin:0; display:inline-block; }
.step-text{ margin:0; }

/* Footer */
footer{ background:#212529; color:#fff; }

.footer-links{ list-style:none; padding-left:0; margin:0; }
.footer-links li{ line-height:1.3; margin:.2rem 0; }
footer a, footer a:link, footer a:visited{
  color:#e7ecef; text-decoration:none; transition: color .2s ease, text-decoration-color .2s ease;
}
footer a:hover, footer a:focus{
  color:#fff; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;
}
/* mail del footer en blanco fijo */
.footer-links a[href^="mailto:"]{ color:#fff; }

footer .vr{ background-color: rgba(255,255,255,.15); }

/* Social icons */
#whatsapp-icon-footer,#linkedin-icon-footer,#email-icon{
  font-size:70px; color:#e7ecef; transition: color .2s ease, transform .2s ease;
}
#whatsapp-icon-footer:hover{ color:#0a66c2; transform:translateY(-1px); }
#linkedin-icon-footer:hover{ color:#0a66c2; transform:translateY(-1px); }

/* Alinear íconos en fila y centrados */
.footer-social{
  display:flex; align-items:center; justify-content:center; gap:1.25rem; flex-wrap:nowrap;
}
.footer-social a{
  display:inline-flex!important; align-items:center; justify-content:center;
  width:var(--icon-size-lg); height:var(--icon-size-lg);
}
.footer-social i{ font-size:var(--icon-size-lg); line-height:1; display:block; }


/* Footer tablet */
@media (min-width:601px) and (max-width:991.98px){
  .footer-social a{ width:var(--icon-size-md); height:var(--icon-size-md); }
  .footer-social i{ font-size:var(--icon-size-md); }
}

/* ===== ≤900px (tablet + mobile, menú colapsado) ===== */
@media only screen and (max-width:900px){
  nav{ background:#212529; }
  #sliderTittles{ font-size:60px!important; }
  #sliderCaptions{ font-size:20px!important; }

  #contact-button{
    background:transparent; border:none; color:#fff; height:35px; width:50%;
    transform:skewX(0);
  }

  /* área colapsada negra y más alta */
  #navbarSupportedContent{
    background:#212529; padding:.5rem 0 1.25rem; width:100%;
  }
  #navbar-tool .navbar-nav{ padding:.25rem 0; row-gap:.25rem; }
  #navbar-tool .navbar-nav .nav-link{
    display:flex; align-items:center; min-height:56px; padding:0 1rem; line-height:1.1;
  }
  #contact-button .nav-link{ min-height:56px; padding:0 1rem; }

  /* dropdown dentro del colapso */
  #navbar-tool .dropdown-menu{
    position:static; float:none; width:100%; margin:.25rem 0 .5rem;
    background:#1a1e23; border:0; box-shadow:none;
  }
  #navbar-tool .dropdown-menu .dropdown-item{
    display:flex; align-items:center; min-height:48px; padding:0 1rem;
  }
}

/* ≥768px: asegurar dropdown pegado */
@media (min-width:768px){
  .step-text{ text-align:left; }
  #navbar-tool .nav-item.dropdown{ position:relative; }
  #navbar-tool .nav-item.dropdown > .dropdown-menu{
    left:0; right:0; width:100%; min-width:100%; margin-top:0;
    border-top-left-radius:0; border-top-right-radius:0; border-top:0;
  }
  #navbar-tool .nav-item.dropdown > .nav-link{
    border-bottom-left-radius:0; border-bottom-right-radius:0;
  }
}

/* ≤600px (celular) */
@media only screen and (max-width:600px){
  .footer-social a{ width:var(--icon-size-sm); height:var(--icon-size-sm); }
  .footer-social i{ font-size:var(--icon-size-sm); }

  .parallax-effect{
    background-image:url("./Images/backgroundsImages/N_Background_Opacity.jpg");
    width:100%; height:100%; background-attachment:fixed;
    background-position:center; background-repeat:no-repeat; background-size:cover;
  }
  nav{ background:#212529; }

  #sliderTittles{ font-size:30px!important; }
  #sliderCaptions{ font-size:15px!important; }
  h2#sliderTittles.slider-sm{ font-size:26px!important; line-height:1.15; }

  #logo{ height:60px; padding-left:0; }
  main{ box-sizing:border-box; width:100%; }

  #contact-button{
    background:transparent; border:none; color:#fff; height:45px; transform:skewX(0deg);
  }

  #card-frame{
    width:90%; height:200px; border:3px solid #fff;
    background-position:center; background-size:cover; background-clip:padding-box;
    transform:skewX(-8deg); transition:.5s;
  }
  #card-frame:hover{ transform:scale(1.08); visibility:visible; }

  #whatsapp-icon-footer,#linkedin-icon-footer{ font-size:70px; margin:0 3rem; }
  .text-card{ font-size:35px; color:#fff; text-align:center; margin:10px auto 0; background:#222d6934; }
  #btn-card{ background:transparent; border:2px solid #222d69; color:#fff; position:absolute; right:5px; bottom:2px; }

  #whatsapp-icon-footer,#linkedin-icon-footer,#email-icon{
    font-size:48px; margin:0 1.25rem;
  }
}

/* ≤300px ultra-compacto */
@media only screen and (max-width:300px){
  html,body{ overflow-x:hidden; }

  #logo{ height:48px; padding-left:0; }
  .navbar-toggler{ padding:.25rem .5rem; }

  #navbarSupportedContent{ padding:.25rem 0 .75rem; }

  #navbar-tool .navbar-nav .nav-link{
    min-height:48px; padding:0 .75rem; font-size:.95rem; letter-spacing:1px;
  }
  #contact-button .nav-link{ min-height:48px; padding:0 .75rem; }

  #navbar-tool .dropdown-menu{ position:static; width:100%; margin:.25rem 0 .5rem; }
  #navbar-tool .dropdown-menu .dropdown-item{
    min-height:44px; padding:0 .75rem; font-size:.95rem;
  }

  #sliderTittles{ font-size:25px!important; }
  #sliderCaptions{ font-size:14px!important; }
  h2#sliderTittles.slider-sm{
    font-size:21px!important; line-height:1.1; letter-spacing:1px;
    text-shadow:2px 2px 8px rgba(33,37,41,.6);
  }
  #carrousel-btn{ padding:.25rem .5rem; font-size:.8rem; }

  .service-image{ max-height:9rem; width:100%; object-fit:cover; }
  .service-text{ font-size:.95rem; line-height:1.35; }

  .btn-wsp{ width:48px; height:48px; bottom:12px; right:12px; font-size:22px; }
  .whatsapp-icon{ margin-top:10px; }

  .footer-social{ display:flex; justify-content:center; align-items:center; gap:12px; }
  #whatsapp-icon-footer,#linkedin-icon-footer,#email-icon{ font-size:36px; margin:0 .75rem; }
}