/* ============================================================
   AZIT — Azuax IT Solutions SpA
   Basado en el diseño original de Azecure Cloud
   Tipografías: Montserrat · Open Sans · Source Code Pro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* ── Selección ── */
::selection {
  background-color: #F1AB00;
  color: #1F1F27;
}

/* ── Reset base ── */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

body {
  background-color: #1F1F27;
  color: white;
  font-family: "Open Sans", sans-serif;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  margin-bottom: 20px;
}

p {
  font-weight: 300;
  font-size: 17px;
}

/* ── Colores de texto ── */
.text-r  { color: #FF54C8; }
.text-a  { color: #F1AB00; }
.text-v  { color: #79dfc1; }
.text-g  { color: #39393E; }
.text-b  { color: white !important; }
.text-muted-az { color: #7A7A7F; }

/* ── Utilidades ── */
.d-flex   { display: flex; }
.flex-1   { flex: 1; }
.m-auto   { margin: auto; }
.mb-sep   { margin-bottom: 100px; }
.mt-sep   { margin-top: 100px; }
.mt-sep-150 { margin-top: 150px; }
.mb-0     { margin-bottom: 0; }

/* ── Botones ── */
.btn-y {
  background-color: #F1AB00;
  color: #1F1F27;
  border: solid 1px #F1AB00;
  text-decoration: none;
  border-radius: 50px;
  padding: 5px 25px;
  display: block;
  width: fit-content;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.btn-y:hover {
  background-color: #1F1F27;
  color: #F1AB00;
}

.btn-b {
  background-color: #24242C;
  color: #F1AB00;
  border: solid 1px #5E5E62;
  text-decoration: none;
  border-radius: 50px;
  padding: 5px 25px;
  display: block;
  width: fit-content;
  font-family: "Open Sans", sans-serif;
  transition: .3s;
}
.btn-b:hover {
  background-color: #1F1F27;
  border: solid 1px #F1AB00;
  color: white;
}

/* ── Fondos de partículas (glow radial) ── */
.par1 {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #FF54C8, #1f1f27, #1f1f27);
  opacity: 0.1;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  left: -200px;
}
.par2 {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #F1AB00, #1f1f27, #1f1f27);
  opacity: 0.1;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  border-top: 10px solid;
  border-image-slice: 1;
  border-width: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  background: linear-gradient(180deg, rgba(31,31,39,1) 0%, rgba(31,31,39,0.65) 50%, rgba(31,31,39,0) 100%);
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.border-gradient {
  border-image-source: linear-gradient(to left, #F1AB00, #FF54C8);
}

nav ul li a {
  color: #7A7A7F !important;
  margin-right: 15px;
  transition: .2s;
}
nav ul li a:hover { color: white !important; }

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show { color: #F0AB03 !important; }

.nav-d { justify-content: end; }

/* Logo texto AZIT */
.navbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.logo-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: white;
  letter-spacing: -0.02em;
}
.logo-name span { color: #F1AB00; }

.logo-phrase {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 0.65rem;
  color: #7A7A7F;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.menu { width: 30px; }
.navbar-toggler { border: none; }
.navbar-toggler:focus,
.navbar-toggler:hover { box-shadow: none; }

/* ============================================================
   CAROUSEL / HERO
   ============================================================ */
.carousel {
  margin-top: 84px;
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.carousel-inner {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  transition: transform 0.5s ease;
  align-items: center;
  height: 500px;
}
.carousel-item {
  flex: 0 0 100%;
  text-align: center;
  color: white;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: fade 0.5s ease-in-out;
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.carousel-item.active { opacity: 1; }

.carousel h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 35px;
  margin-bottom: 20px;
  font-weight: 700;
}
.carousel h2 {
  font-size: 20px;
  color: #7A7A7F;
  font-weight: 300;
}
.button-carousel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
}
.button-carousel.prev-btn {
  left: 0;
  background: transparent;
  color: #70707024;
  font-size: 50px;
}
.button-carousel.next-btn {
  right: 0;
  background: transparent;
  color: #70707024;
  font-size: 50px;
}

/* ============================================================
   LOGOS CAROUSEL
   ============================================================ */
.logos {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
.logos img {
  width: 200px;
  margin: 0 20px;
  transition: .5s;
  cursor: pointer;
}
.logos img:not(:hover) { filter: grayscale(100%); }

.scroll {
  position: relative;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}
.scroll .cont-logos {
  white-space: nowrap;
  animation: animate 30s linear infinite;
}
@keyframes animate {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.scroll:hover .cont-logos { animation-play-state: paused; }

/* ============================================================
   FORMULARIO
   ============================================================ */
form .form-control,
form .form-select {
  background-color: transparent;
  border-radius: 0 !important;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 10px 0;
  border-bottom: solid 1px #616165;
  color: white;
}
form .form-control:focus,
form .form-select:focus {
  background-color: transparent;
  box-shadow: none;
  color: white;
  outline: none;
  border-bottom: solid 1px white;
}
form small { opacity: 0; }
form .mb-3.error small { opacity: 1; color: #F1AB00; }
input::placeholder { color: #616165 !important; }
select { color: #616165 !important; }
.alert {
  text-align: center;
  border-radius: 50px;
}
.alert-success {
  background-color: #0b1b12;
  color: #84b59a;
  border: solid 1px #255035;
}
.alert-danger {
  background-color: #280d0f;
  color: #dc8b91;
  border: solid 1px #79282c;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 100px 0;
}
footer ul { padding: 0; }
footer ul li { list-style: none; }
footer a {
  text-decoration: none;
  color: white;
  transition: .2s;
}
footer a:hover { opacity: 0.5; }
footer .redes a {
  width: 20px;
  display: inline-block;
  margin: 5px;
}
footer .redes a:hover { opacity: 0.5; }
footer .semicirculo {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #FF54C8, #1f1f27, #1f1f27);
  opacity: 0.1;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  position: absolute;
  z-index: -9;
  bottom: 0;
}
footer .tap {
  height: 50%;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: -8;
  background: linear-gradient(180deg, rgba(31,31,39,1) 0%, rgba(31,31,39,0) 100%);
}
footer .t-contact {
  display: flow-root;
}
footer .t-contact:hover {
  opacity: 1;
  color: #F1AB00;
}

/* ============================================================
   BLOQUES / COMPONENTS
   ============================================================ */

/* Bloque expertise (borde) */
.bloq-e {
  border: solid 1px #2A2A32;
  border-radius: 20px;
  padding: 30px;
  margin-left: 0;
  margin-right: 0;
}

/* Bloque card oscuro */
.bloq-b {
  background: #24242C;
  border-radius: 20px;
  padding: 30px;
  width: 100%;
}
.bloq-b .icn-b {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #1F1F27;
  border: solid 1px #2A2A32;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bloq-b .icn-b img {
  height: 80px;
  max-width: 80px;
}

/* Bloque card con imagen (casos/blog) */
.bloq-o {
  background-color: #24242C;
  border-radius: 20px;
  width: 100%;
  display: block;
  text-decoration: none;
  border: 1px solid #24242C;
  overflow: hidden;
  transition: .3s;
}
.bloq-o:hover { border: 1px solid #5E5E62; }
.bloq-o:hover .img-bloq-o { opacity: 0.7; }
.bloq-o .cont-bloq-o {
  padding: 30px;
  text-align: center;
}
.bloq-o .img-bloq-o {
  height: 300px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background-size: cover;
  opacity: 0.5;
  background-position: center center;
  transition: .3s;
}

/* Bloque con fondo claro (tech stack) */
.bloq-c {
  background-color: white;
  border-top: 10px solid;
  border-image-slice: 1;
  border-bottom: 10px solid;
  border-width: 5px;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Bloque servicio (link) */
.bloq-s {
  text-decoration: none;
  display: flex;
}
.bloq-s p { color: white; }
.bloq-s .bloq-b { border: solid 1px #24242C; }
.bloq-s:hover .bloq-b { border: solid 1px #5E5E62; }

/* ============================================================
   BANNER SUPERIOR (páginas internas)
   ============================================================ */
.banner-sup {
  margin-top: 200px;
  text-align: center;
  margin-bottom: 100px;
}
.banner-sup h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 35px;
  margin-bottom: 20px;
  font-weight: 700;
}
.banner-sup h1 span { color: #F1AB00; }
.banner-sup h2 {
  font-size: 20px;
  color: #7A7A7F;
  font-weight: 300;
}

/* ============================================================
   PAGINACIÓN
   ============================================================ */
.active>.page-link,
.page-link.active,
.page-link.active:hover {
  background-color: #F1AB00 !important;
  color: white !important;
  border-radius: 5px;
}
.pagination li a {
  background-color: transparent;
  border: none;
  color: white;
}
.pagination li a:hover { background-color: transparent; }
.pagination li a:focus {
  box-shadow: none;
  background-color: transparent;
  color: white;
}
.page-link:hover { color: #7A7A7F; }

/* ============================================================
   CONTACTO
   ============================================================ */
.bloq-contact {
  border: solid 1px #2A2A32;
  border-radius: 20px;
  padding: 30px;
  margin-left: 0;
  margin-right: 0;
}
.icn-ctc {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #1F1F27;
  border: solid 1px #2A2A32;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icn-ctc img { height: 80px; max-width: 80px; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.accordion { --bs-accordion-border-radius: none; }
.accordion-button {
  background-color: transparent;
  color: white;
  border-radius: 0 !important;
}
.accordion-item {
  background-color: transparent;
  color: white;
  border: none;
  border-bottom: solid 1px #616165;
}
.accordion-button:focus { box-shadow: none; }
.accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #F1AB00;
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after,
.accordion-button::after { filter: brightness(100); }

/* ============================================================
   ABOUT / DETAIL
   ============================================================ */
.img-ab { width: 30%; margin: auto; }
.bgw {
  background-color: #24242C;
  padding-top: 100px;
  padding-bottom: 100px;
}
.cont-bgw {
  background-size: cover;
  height: 300px;
  width: 100%;
  opacity: 0.5;
  border-radius: 20px;
  background-position: center center;
}
.icn-av {
  width: 150px;
  height: 150px;
  border: solid 1px #2A2A32;
  overflow: hidden;
  border-radius: 50%;
}
.icn-av img { width: 100%; }

/* ============================================================
   BLOG DETAIL / CASO DETALLE
   ============================================================ */
.details ul li {
  font-size: 17px;
  font-weight: 300;
  margin-bottom: 5px;
}
::marker { color: #616165; }
blockquote {
  border-left: solid 3px #616165;
  padding-left: 30px;
  font-style: italic;
}
.details img {
  border-radius: 20px;
  width: 100%;
  opacity: 0.5;
}

/* ============================================================
   CÓDIGO
   ============================================================ */
.code {
  background-color: #24242C;
  padding: 30px;
  border-radius: 20px;
  font-family: "Source Code Pro", serif;
}
.code p {
  margin-bottom: 0;
  font-weight: normal;
}

/* ============================================================
   IMÁGENES DE FONDO (casos/blog)
   ============================================================ */
.img1 { background-image: url(../img/img1.jpg); }
.img2 { background-image: url(../img/img2.jpg); }
.img3 { background-image: url(../img/img3.jpg); }
.img4 { background-image: url(../img/img4.jpg); }
.img5 { background-image: url(../img/img5.jpg); }
.img6 { background-image: url(../img/img6.jpg); }
/* Imágenes específicas para casos de estudio AZIT */
.img-caso1 { background-image: url(../img/img1.jpg); }
.img-caso2 { background-image: url(../img/img2.jpg); }
.img-caso3 { background-image: url(../img/img3.jpg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
  .img-ex { width: 100%; }
  .bloq-e, .bloq-contact { padding: 40px; }
}

@media (min-width: 992px) {
  .btn-y, .btn-b { padding: 20px 30px; }
  .par2 { right: -200px; }

  nav ul li a {
    margin-right: 0;
    padding-right: 0 !important;
    margin-left: 15px;
  }

  .carousel-inner {
    padding-left: 100px;
    padding-right: 100px;
  }
  .carousel h1, .banner-sup h1 { font-size: 40px; }
  .carousel h2, .banner-sup h2 { font-size: 28px; }
  .carousel, .carousel-inner { height: 600px; overflow: hidden; }

  .img-ab { width: 50%; }
  .details .img-50 { width: 50%; }
  .details .img-10 { width: 100%; }
}

@media (min-width: 1200px) {
  .carousel h1, .banner-sup h1 { font-size: 50px; }
  .carousel h2, .banner-sup h2 { font-size: 32px; }
}