/*
Theme Name: Biismart2025
Theme URI: https://biismart.com/
Author: BiiSmart Group
Description: Tema base para nuevo sitio de BiiSmart.
Version: 1.0
Text Domain: biismart
*/

/* Importar fuentes desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&family=Inter:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Variables de color */
:root {
  --color-primario: #239193;
  --color-secundario: #26687F;
  --texto: #FFFFFF;
  --destaque-primario: #4BBBB5;
  --destaque-secundario: #23D8C0;
  --azul-medio: #26687F;
  --azul-claro: #005E76;
  --azul-oscuro: #0E1F32;
  --azul-oscuro-2: #1D2739;
  --footer-green-a: #007785;
  --footer-green-b: #01252A;
  --color-base: #09475D;
}

/*Body*/
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
  color: var(--color-base);
}

/* Padding extension */
.py-6 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.py-7 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.py-8 {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

.py-9 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.py-10 {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

/* Tipografía para menú */
.menu {
  font-family: 'Georama', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 104%;
  color: var(--texto);
}

/* BTN */
a.btn {
  font-family: 'Inter', sans-serif; 
  display: inline-block;
padding: 20px 40px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 6px;
background: var(--destaque-primario);
color: var(--texto);
transition: ease 0.3s;
text-transform: uppercase;
}
a.btn:hover {
  background: var(--texto);
  color: var(--color-primario);
  transform: translateX(10px) !important; }

/* HEADER */
header .custom-logo-link img {
  max-width: 200px;
  height:auto;
}

/* --------------------------------------------- 

          MENU STYLES

--------------------------------------------- */
/* Botón hamburguesa */
.navbar-toggler .hamburger-icon {
  font-size: 24px;
  color: var(--footer-green-a);
}

/* En desktop tu .nav seguramente ya es flex; si no, ayudamos un poco */
.main-nav .nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* En mobile, que se apile vertical */
@media (max-width: 991px) {
  .main-nav {
    flex-wrap: wrap;
  }
  .main-nav .nav {
    position: absolute;
    top: 75px;
    left: 0;
    width: 100%;
    background: var(--texto);
    flex-direction: column;
    align-items: center;
  }

  .main-nav .nav a {
    letter-spacing: 0;
  }

  .main-nav .nav li ul.sub-menu {
    min-width: max-content;
    left: -50%;
  }
}



/* Titling general */
body.page-template-default article.page {
  color: var(--azul-oscuro);
}
body.page-template-default article.page h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  color: var(--color-base);
}
body.page-template-default article.page .page-content p {
  font-family: 'Georema', sans-serif;
  font-weight: 400;
  color: var(--color-base);
  text-align: justify;
}

/* Encabezados */
h1 {
  font-family: 'Georama', sans-serif;
  font-size: 72px;
  font-weight: bold;
  line-height: 98%;
  color: var(--texto);
}

h2 {
  font-family: 'Georama', sans-serif;
  font-size: 64px;
  font-weight: bold;
  line-height: 98%;
  color: var(--texto);
}

h3 {
  font-family: 'Inter', sans-serif;
  font-size: 54px;
  font-weight: bold;
  line-height: 98%;
  color: var(--texto);
}

h4 {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: bold;
  line-height: 98%;
  color: var(--texto);
}

h5 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 36px;
  letter-spacing: -2%;
  color: var(--texto);
}

/* Footer */
footer {
  background: linear-gradient(180deg, var(--footer-green-a) 0%, var(--footer-green-b) 100%);
  font-family: 'Ubuntu', sans-serif;
  color: var(--texto);
}

footer img {
  max-width: 147px;
}

footer h6 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--texto);
}

footer ul.list-unstyled {
  padding: 0;
  margin: 0;
  text-align: left;
}

footer ul.list-unstyled li {
  margin-bottom: 10px;
}

footer ul.list-unstyled li a {
  color: var(--texto);
  text-decoration: none;
  font-weight: 300;
  font-size: 16px;
}

footer ul.list-unstyled li a:hover {
  color: var(--destaque-secundario);
}

footer .btn {
  background-color: var(--texto);
  color: var(--color-secundario);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}

footer .btn:hover {
  background-color: var(--destaque-secundario);
  color: var(--texto);
} 

footer .btn.btn-success {
  background-color: var(--destaque-primario);
  color: var(--texto);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}
footer .btn.btn-success:hover {
  background-color: var(--texto);
  color: var(--footer-green-a);
} 

footer p {
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--texto);
}

footer p.final-message {
  font-family: 'Ubuntu', sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 20px;
  color: var(--destaque-secundario);
  letter-spacing: 2px;
}

footer .rrss {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
}

footer .rrss a {
  background: var(--texto);
  border-radius: 100px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease 0.3s;
}

footer .rrss a i {
  font-size: 24px;
  color: var(--footer-green-a);
}

footer .rrss a:hover {
  background: var(--destaque-secundario);
  transform: scale(1.1);
}

footer .rrss a:hover i {
  color: var(--texto);
}

footer #menu-footer_menu {
  margin: 0;
}

footer #menu-footer_menu li {
  list-style: none;
}

footer #menu-footer_menu li a {
      color: var(--texto);
    text-decoration: none;
    font-weight: 300;
    font-size: 16px;
}
footer #menu-footer_menu li a:hover {
  color: var(--destaque-secundario);
}

footer ul#menu-footer_menu_eng {
    list-style: none;
    margin: 0;
}
ul#menu-footer_menu_eng a {
    font-family: 'Georama', sans-serif;
    color: var(--texto);
    text-decoration: none;
    font-weight: 300;
    font-size: 16px;
    padding: 0;
    margin: 0;
}



/* MENU */
.nav,
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  position: relative;
}

.nav li a {
  color: var(--azul-medio);
  padding: 15px;
  text-decoration: none;
  font-family: 'Georama', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.5px;
  display: inline-block;
  transition: ease 0.3s;
}
.nav li a:hover {
  color: var(--azul-oscuro);
}
.nav li.current-menu-item a {
  font-weight: 500;
  color: var(--color-base);
  position: relative;
}
.nav li.current-menu-item a:after {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 35%;
    width: 30%;
    height: 2px;
    background-color: var(--color-base); 
}

.nav li:nth-child(6) a:after {
    display: none;
}
.nav li:nth-child(5) a,
.nav li.contact-highlight a {
  background-color: var(--azul-medio);
  color: var(--texto);
  border-radius: 8px;
}
.nav li:nth-child(5) a:hover,
.nav li.contact-highlight a:hover {
  background-color: var(--color-primario);
}
.nav li.menu-item-has-children a+.sub-menu li:nth-child(5) a {
  background-color: white !important;
  border-radius: 0 !important;
  color: var(--azul-medio);
}
.nav li.menu-item-has-children a+.sub-menu li:nth-child(5) a:hover {
  color: var(--azul-oscuro);

}
.nav li.lang a {
  padding: 15px 10px;
  border-radius: 8px;
  margin-left: 10px;
}

.nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--texto);
  min-width: max-content;
  z-index: 10;
}

.nav li ul.sub-menu li a {
  padding: 10px 20px;
}

.nav li:hover > ul {
  display: block;
}

/* HERO BII */
.hero-bii {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--texto);
  clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 60px), 0px 100%);
}

.hero-bii__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-bii__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(268deg, rgba(29, 39, 57, 0.00) 23.01%, var(--azul-claro) 88.58%);
  mix-blend-mode: multiply;
  z-index: 2;
}

.hero-bii__content {
  position: relative;
  z-index: 3;
  text-align: left;
}

.hero-bii h2 {
  color: var(--texto);
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.72px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-bii h1 {
  color: var(--texto);
  font-family: 'Ubuntu', sans-serif;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 400;
  margin-bottom: 40px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-bii__cta {
  display: inline-flex;
  padding: 15px;
  align-items: center;
  gap: 15px;
  border-radius: 8px;
  background: var(--color-primario);
  color: var(--texto);
  text-decoration: none;
  font-family: 'Georama', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  transition: ease 0.3s;
}

.hero-bii__cta:hover {
  background: var(--texto);
  color: var(--color-primario);
  transform: translateX(10px) !important;
}

.hero-bii__cta .arrow {
  font-size: 21px;
  margin-left: 5px;
}

@media (max-width: 768px) {
  .hero-bii {
    height: 60vh;
    min-height: 380px;
  }

  .hero-bii h1 {
    font-size: 34px;
  }

  .hero-bii h2 {
    font-size: 26px;
  }

  .hero-bii__cta {
    font-size: 18px;
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .hero-bii h1 {
    font-size: 28px;
  }

  .hero-bii h2 {
    font-size: 22px;
  }
}

/* --------------------------------------------- 
        
        Global Logistics & Trading Cards

--------------------------------------------- */

.global-trading-section {
  position: relative;
}

.global-trading-section:before {
  /* position: absolute;
  content: "";
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: var(--texto); */
  /* clip-path: polygon(0 0, 100% 100%, 0 100%); */
}

.service-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 20px;
  background-size: cover;
  background-position: center;
}

.service-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primario);
  mix-blend-mode: multiply;
  z-index: -1;
}

.service-card.second-card:after {
  background-color: var(--color-secundario);
}

.service-card .service-card__title {
  color: var(--texto);
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.28px;
}

.service-card .service-card__subtitle {
  color: var(--texto);
  font-family: 'Ubuntu', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.3px;
}

.service-card p.service-card__text {
  color: var(--texto);
  font-family: 'Georama', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: 0.5px;
}

.service-card p.service-card__text strong {
  font-weight: 500;
}

.service-card a.btn-service {
  display: inline-block;
  padding: 10px 15px;
  gap: 15px;
  color: var(--azul-medio);
  background: var(--texto);
  border-radius: 8px;
  text-transform: uppercase;
  font-family: 'Georama', sans-serif;
  font-size: 18px;
  transition: ease 0.3s;
}

.service-card.second-card a.btn-service {
  background-color: var(--color-primario);
  color: var(--texto);
}

.service-card a.btn-service:hover {
  transform: translateX(10px);
}

/* --------------------------------------------- 

          Choose Us section 

--------------------------------------------- */
.choose-us-section {
  background-color: var(--azul-medio);
  background-position: right bottom;
  background-attachment: scroll;
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(0px 0px, 100% 60px, 100% 100%, 0px calc(100% - 60px));

}
.choose-us-section * {
  color: var(--texto);
}
.choose-us-section h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.choose-us-section h4 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--texto);
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0.5px;
  margin-bottom: 30px;
}

.choose-us-section p {
  font-family: 'Georama', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0.5px;
  margin-bottom: 30px;
}
 
 .choose-us-section .card-item_biis {
  background-color: var(--texto);
  color: var(--color-base);
  text-align: center;
  padding: 30px;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .choose-us-section .card-item_biis img {
  margin-bottom: 20px;
  width: 90px;
  height: 90px;
 }
 .choose-us-section .card-item_biis h3 {
  font-size: 16px;
  font-family: 'ubuntu', sans-serif;
  }
.choose-us-section .card-item_biis p.small {
   color: var(--azul-oscuro);   
   font-size: 15px;
   font-weight: 400;
   line-height: 16px;
   font-family: 'Inter', sans-serif;
}  

 .choose-us-section p.medium {
 
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--texto);
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 30px;
}

.choose-us-section a.btn  {
  background: var(--destaque-primario) !important;
  color: var(--texto) !important;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  letter-spacing: -0.2px;
  transition: ease 0.3s;
 }
 .choose-us-section a.btn:hover {
  background: var(--texto) !important;
  color: var(--footer-green-a) !important;
  transform: translateX(10px) !important;
 }

 
 .choose-us-section::before {
  /* position: absolute;
  content: "";
  top: -1px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: var(--texto);
  clip-path: polygon(100% 100%, 0% 0%, 100% 0%); */
 }
 .choose-us-section::after {
  /* position: absolute;
  content: "";
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: var(--texto);
  clip-path: polygon(100% 100%, 0% 100%, 0% 0%); */
 }  


 /* --------------------------------------------- 

          Servicio Integral section 

--------------------------------------------- */

section.service-integral-section {
  background-color: var(--texto);
}

section.service-integral-section h2 {
  font-size: 48px;
  color: var(--color-secundario);
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 20px;

}

section.service-integral-section p {
  font-size: 18px;
  color: var(--azul-medio);
  line-height: 30px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}

section.service-integral-section p.fw-semibold {
  font-weight: 600;
}

section.service-integral-section a.btn {
  background: var(--destaque-primario) !important;
  color: var(--texto) !important;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  letter-spacing: -0.2px;
  transition: ease 0.3s;
}
section.service-integral-section a.btn:hover {
  background: var(--texto) !important;
  color: var(--azul-medio) !important;
  transform: translateX(10px) !important;
 }

  /* --------------------------------------------- 

          Valor equipo section 

--------------------------------------------- */

section.valor-equipo-section {
  background-color: var(--azul-oscuro-2);
  background-size: 30%;
  background-repeat: repeat;
}

section.valor-equipo-section h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size:40px;
  color: var(--color-secundario);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

section.valor-equipo-section h2.fw-bold {}

section.valor-equipo-section p {
  font-size: 16px;
  color: var(--azul-medio);
  line-height: 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

section.valor-equipo-section a.btn {
  background: var(--destaque-primario) !important;
  color: var(--texto) !important;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: -0.2px;
  transition: ease 0.3s;
}

section.valor-equipo-section a.btn:hover {
  background: var(--texto) !important;
  color: var(--azul-medio) !important;
  transform: translateX(10px) !important;
 }

section.valor-equipo-section::before {
  position: absolute;
  content: "";
  top: -1px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: var(--texto);
  clip-path: polygon(100% 100%, 0% 0%, 100% 0%);
 }
 section.valor-equipo-section::after {
  position: absolute;
  content: "";
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: var(--texto);
  clip-path: polygon(100% 100%, 0% 100%, 0% 0%);
 }  


.valor-container {
  position: relative;
  background: #d9d9d955;
  border: dashed 1px #d9d9d99e;
  width: 400px;
  height: 400px;
  display: block;
  border-radius: 1000px;
  margin-top: 30px;
}
.valor-container-inner {
  position: absolute;
  background: #d9d9d99f;
  border: dashed 1px #d9d9d953;
  width: 320px;
  height: 320px;
  display: block;
  border-radius: 1000px;
  left: 40px;
  top:40px;
}
.valor-container-center {
  background: var(--texto) ;
  width: 240px;
  height: 240px;
  display: block;
  border-radius: 1000px;
  top: 40px;
  left: 40px;
  position: absolute;
}
.valor-container-center img {
  position: absolute;
  top: 60px;
  left: 45px;
}
.company { 
    display: inline-block;
    position: absolute;
}
.company * {
  transition: ease 0.5s;
}
.global {
    left: 30px;
    top: 10px;
}
.trading {
    left: 217px;
    top: 10px;
}
.allinx {
    left: -5px;
    bottom: 110px;
}
.biisensing {
    left: 120px;
    bottom: -40px;
}
.biisensing .pointer {
    top: -10px;
}
.biilinx {
   left: 228px;
    bottom: 60px;
}
.biisensing .card {
        top: -20px;
    left: -90px;
}
.pointer{
     content: " ";
    background: #005E76;
    position: absolute;
    bottom: -5px;
    left: calc(50% - 8px);
    width: 16px;
    height: 16px;
    border-radius: 100px;
}
.logo-show {
  padding-bottom: 20px;
}

.company .card {
  width: 320px;
  transition: ease 0.5s;
  padding: 20px;
  position: absolute;
  transform: translateY(15px);
  opacity: 0;
  z-index: 9;
}
.company:hover .card {
  transform: translateY(0px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  opacity: 1;
}
.allinx .card {
   right: 0px;
    top: -50px;
}
.biilinx .card {
   top: -20px;
   left: 0;
}
.trading .card {
   top: -30px;
}
.global .card {
   right: 0px;
    top: -30px;
}

.company .card img {
  margin-bottom: 10px;
  width: 155px;
}
.company .card  p {
  font-size: 16px;
  line-height: 18px;
}
.company .card a {
 background-color: #26687F;
    color: var(--texto);
    text-transform: uppercase;
    display: grid;
    text-decoration: none;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 14px;
    text-align: center;
}
.company .card a:hover {
  background: var(--color-primario);
}





  /* --------------------------------------------- 

          Testimonios section 

--------------------------------------------- */

section.testimonials-section {
  position: relative;
  background: linear-gradient(180deg, #4BBBB5 25.94%, #267F7B 77.35%);
}

section.testimonials-section::before {
  position: absolute;
  content: "";
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: #4BBBB5;
  clip-path: polygon(100% 100%, 0% 0%, 0% 100%);
 }

 section.testimonials-section::after {
  position: absolute;
  content: "";
  bottom: -29px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: #267F7B;
  clip-path: polygon(100% 100%, 100% 0%, 0% 0%);
 }

 section.testimonials-section h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 56px;
  color: var(--texto);
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 20px;    
   }

    section.testimonials-section h4 {
  font-family: 'Ubunt', sans-serif;
  font-size: 32px;
  color: var(--texto);
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.5px;       
   margin: 30px 0;  
   }

   .testimonial-card {
    background-color: var(--texto);
    border-radius: 10px;
    padding: 60px 30px;
    text-align: left;
    box-shadow: 15px 10px 50px 0 rgba(0, 0, 0, 0.10);
   }

   .testimonial-card span {
    display: block;
    margin-top: 15px;
   }

   .testimonial-card p {
    font-family: 'Ubunt', sans-serif;
    font-size: 18px;
    color: var(--azul-medio);
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.3px;       
    padding: 30px 0;
    border-bottom: solid 1px var(--azul-medio);
   }


/* ---------------------------------------------

          NUESTRAS OFICINAS EN ASIA Y EL MUNDO

--------------------------------------------- */

section.nuestras-oficinas-section {
  background-color: var(--azul-oscuro);
}

section.nuestras-oficinas-section h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 48px;
  }

section.nuestras-oficinas-section p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 300;
  }
  section.nuestras-oficinas-section a.btn {
  background: var(--destaque-primario) !important;
  color: var(--texto) !important;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: -0.2px;
  transition: ease 0.3s;
 }
 section.nuestras-oficinas-section a.btn:hover {
  background: var(--texto) !important;
  color: var(--azul-medio) !important;
  transform: translateX(10px) !important;              
}

.nuestras-oficinas-section .rounded-pill {
  padding: 6px 10px !important;
}
.nuestras-oficinas-section .rounded-pill span.me-2 {
  font-size: 28px;
  line-height: 28px;
}

.nuestras-oficinas-section .rounded-pill span.fw-semibold.small {
  color:var(--color-base);
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
}

 /* --------------------------------------------- 

          Carousel features

--------------------------------------------- */

.carousel-features {
}

.carousel-slide-item {
  height: 360px; /* Ajusta según tu diseño */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  margin:0px -30px !important;
}

.carousel-item {
    border-radius: 16px;
    overflow: hidden;
}
.carousel-slide-item .align-items-center {
}
.carousel-slide-item h2, 
.carousel-slide-item p {
  color: var(--texto);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
} 
.carousel-slide-item h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
  font-weight: 300;
  padding-top: 60px;
}
.carousel-slide-item p {
    font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: 300;    
  width: 60%;
    margin: 30px 0;
    position: absolute;
    left: 20%;
}


/* Overlay opcional */
.carousel-slide-item::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0,0,0,0.45); oscurece para mejorar legibilidad */
}

.carousel-slide-item > * {
  position: relative;
  z-index: 2;
}

@media screen and (max-width:576px){
  .carousel-slide-item h2 {
    font-size: 26px;
  }
  .carousel-slide-item p {
    font-size: 21px;
  }
}

  /* --------------------------------------------- 

          Últimas novedades en nuestro Blog

--------------------------------------------- */

.blog-section {
  background-color: var(--texto);
  padding: 60px 0;
  position: relative;
}
.blog-section:before {
    content: "";
    position: absolute;
    background: var(--texto);
    top: -58px;
    left: 0px;
    width: 100%;
    height: 60px;
    clip-path: polygon(100% 60px, 100% 60px, 0% 100%, 0px 0%);
}

.blog-section h2 {
  color: var(--azul-claro);
  font-size: 48px;
  font-family: 'Ubuntu', sans-serif;
}

.blog-section p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--azul-oscuro-2);
}

.blog-section .blog-card {}

.blog-section .blog-card img {}

.blog-section .blog-card .card-body {
  position: absolute;
  border-radius: 16px;
  background: linear-gradient(181deg, rgba(0, 94, 118, 0.25) 50%, #014152 100%);
  bottom: 0;
  left: 0;
  height: 100%;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  transition: ease 0.3s;
}
.blog-section .blog-card .card-body:hover {
  background: linear-gradient(181deg, rgba(0, 94, 118, 0.40) 50%, #014152 100%);  
  padding-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  }

.blog-section .blog-card .card-body h5 {
  font-size: 20px;
}

.blog-section .blog-card .card-body p {
  font-size: 16px;
  color: var(--texto);
  font-weight: 300;
}



.blog-section a.btn {
  background: var(--destaque-primario) !important;
  color: var(--texto) !important;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: -0.2px;
  transition: ease 0.3s;
}

.blog-section a.btn:hover {
  background: var(--texto) !important;
  color: var(--azul-medio) !important;
  transform: translateX(10px) !important;
 }


   /* --------------------------------------------- 

          Blog

--------------------------------------------- */


main.blog-page {
  font-family: 'Ubuntu', sans-serif;
}

main.blog-page .entry-content p {
  color: var(--azul-oscuro-2);
}
main.blog-page svg {
  color: var(--texto);
}
.post-article nav.breadcrumb,
ol.breadcrumb {
  font-size: 16px;
  font-family: 'Georama', sans-serif;
  letter-spacing: 0.3px;
  font-weight: 400;
  margin-bottom: 20px;
  background-color: var(--azul-claro);
  background: linear-gradient(90deg, rgba(0,94,118,1) 50%, rgba(0,94,118,0) 100%);
  padding: 10px 15px;
  border-radius: 4px;
}
.post-article nav.breadcrumb {
  color: var(--destaque-primario);
}
.breadcrumb li {
  color: var(--destaque-primario);
  }
.breadcrumb-item+.breadcrumb-item::before, .breadcrumb-item.active {
  color: var(--destaque-secundario) !important;
}
.post-article nav.breadcrumb span,
.post-article nav.breadcrumb a,
.breadcrumb a {
  color: var(--texto);
  text-decoration: none;
   font-size: 16px;
  font-family: 'Georama', sans-serif;
  letter-spacing: 0.3px;
  font-weight: 400;
}
.post-article nav.breadcrumb span {
  color: var(--destaque-secundario);
}


main.blog-page h1 {
  font-size: 48px;
  font-weight: 600;
  color: var(--color-secundario);
}

body.archive main.blog-page h1 {
  font-size: 36px;
}

main.blog-page p.lead {
  font-size: 18px;
  font-family: 'Georama', sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
}

main.blog-page .post-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 20px;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
  color: var(--texto);
  height: 240px;
      display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

main.blog-page .post-card h2 {
  line-height: 18px;
  font-family: 'Ubuntu', sans-serif;
}
main.blog-page .post-card h2 a {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--texto);
  text-decoration: none;
}
main.blog-page .post-card .post-card-date {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  margin-bottom: 10px;
  color: var(--texto);
}

main.blog-page .post-card .post-card-excerpt a {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 20px;
  color: var(--texto);
  text-transform: uppercase;
  text-decoration: none;
  background: var(--color-secundario);
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 10px;
  transition: ease 0.3s;
} 
main.blog-page .post-card .post-card-excerpt a:hover {
  background: var(--texto);
  color: var(--azul-medio);
  transform: translateX(5px);
}

main.blog-page .right-sidebar h2 {
}
main.blog-page .right-sidebar ul {
}
main.blog-page .right-sidebar ul li{
  display: inline-block;
}
main.blog-page .right-sidebar ul li a {
  font-size: 14px;
  font-family: 'Ubuntu', sans-serif;
  color: var(--footer-green-a);
  font-weight: 500;
  text-decoration: none;
  transition: ease 0.3s;
  display: inline-block;
  margin-right: 8px;
}
main.blog-page .right-sidebar ul li a:hover {
  color: var(--footer-green-b);
  transform: translateX(3px);
  }

  main.blog-page .rounded-pill {
    background: linear-gradient(343deg, rgba(0, 94, 118, 1) 0%, rgb(26 155 170) 100%);
    color: var(--texto);
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 8px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: ease 0.7s;
  }
    main.blog-page .rounded-pill:hover {
  background: linear-gradient(343deg, #1d2739 0%,rgba(0, 94, 118, 1)  100%);
  transform: translateX(3px);
    }

  .featured-container .entry-title {
    color: var(--texto);
    text-shadow: 1px 1px 2px var(--azul-oscuro);
  } 

  .featured-container p.meta {
    color: var(--texto);
    text-shadow: 1px 1px 2px var(--azul-oscuro);
  } 

  .single-post .entry-content h2 strong {
    font-size: 28px;
    color: var(--azul-claro);
    letter-spacing: 0.3px;
    margin: 30px 0 15px;
  }
  .single-post .entry-content h3 {
    font-size: 21px;
    color: var(--azul-oscuro-2);
    font-family: 'Ubuntu', sans-serif;
  }

  .single-post .entry-content h3 strong {
    font-weight: 400 !important;
  }

  .single-post .entry-content p { 
    font-family: 'Ubuntu', sans-serif;
    color: var(--azul-oscuro-2);
    font-size: 16px;;
  }
  .single-post .entry-content hr {
    border-top: 2px solid var(--destaque-primario);
    margin: 30px 0;
  }

  .single-post h5 {
    font-family: 'Georama', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin-top: 45px;
  }

  .single-post .post-taxonomies {
    margin-top: -30px;
  }

  .single-post .post-taxonomies a {
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    color: var(--footer-green-a);
    font-weight: 500;
    text-decoration: none;
    transition: ease 0.3s;
    display: inline-block;
    margin-right: 8px;
  }
  .single-post .post-taxonomies a:hover {
    color: var(--footer-green-b);
    transform: translateX(3px);         
  }
  .single-post .post-tags a {
    background: linear-gradient(343deg, rgba(0, 94, 118, 1) 0%, rgb(26 155 170) 100%);
    color: var(--texto);
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 8px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: ease 0.7s;
  }
    .single-post .post-tags a:hover {
  background: linear-gradient(343deg, #1d2739 0%,rgba(0, 94, 118, 1)  100%);
  transform: translateX(3px);
  color: var(--texto);
    } 
.post-share h3,
  .related-posts h3 {
      color: var(--color-base);
      font-size: 21px;
      font-family: 'Ubuntu', sans-serif;
      font-weight: 500;
    }
  .related-posts a h4 {
      color: var(--color-base);
     font-family: 'Ubuntu', sans-serif;
      font-weight: 500;
    }
.related-posts a p {
  font-family:'Inter', sans,serif;
      color: var(--color-base);
}

.post-navigation {
    font-size: 14px;
    color: var(--color-base);
}

/* --------------------------------------------- 
        
        OptiChina Section
        
--------------------------------------------- */

.optichina-hero {
  padding: 60px 0;
  position: relative;
}
.optichina-hero h1 {
  /* M3/Elevation Dark/3 */
text-shadow: 0px 1px 3px #00000066;
position: relative;
z-index: 2;
}
.optichina-hero p.lead {
  text-shadow: 0px 1px 3px #00000066;
position: relative;
z-index: 2;
}
.optichina-hero::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 0;
  background: linear-gradient(270deg, rgba(29, 39, 57, 0.00) 16.91%, var(--color-secundario) 69.91%);
mix-blend-mode: multiply;
  
}

.optichina-servicios {}
.optichina-servicios h2 {
  color: var(--azul-medio);
font-family: 'Ubuntu', sans-serif ;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.64px;
margin-top: 30px;
}
.optichina-servicios p {
  color: var(--azul-claro);
font-family: 'Georama', sans-serif ;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
letter-spacing: 0.5px;
margin: 30px 0;
}
.optichina-servicios article {}

.optichina-servicios article a * {

  transition: ease 0.8s;
  text-decoration: none;
}
.optichina-servicios article a:hover .card .card-img-overlay {
  opacity: 0.95;
}
.optichina-servicios article a,
.optichina-servicios article a .card  {
  transition: ease 0.8s;
  border: none;
}
.optichina-servicios article a {
    height: 240px;
    display: block;
    border-radius: 16px;
  background-size: 110%;
  background-position: center center;
}
.optichina-servicios article a:hover  {
   background-size: cover;
 
}
.optichina-servicios article .card .card-img-overlay {
  display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 240px;
    border-radius: 16px;
opacity: 0.75;
background: linear-gradient(187deg, rgba(29, 39, 57, 0.00) 29.39%, #006178 62.36%);
}
.optichina-servicios article .card .card-img-overlay h5 {
  color: var(--texto);
font-family: 'Ubuntu', sans-serif ;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.3px;
}
.optichina-servicios article .card .card-img-overlay p {
  color: var(--texto);
font-family: 'Ubuntu', sans-serif ;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.3px;
margin: 0;
}
.optichina-servicios {}
/* =========================================
   Sección: .agilizar-envios
   Todo el estilo queda encapsulado aquí.
========================================= */

.agilizar-envios {
  /* espacio vertical consistente alrededor de la sección
     (el container también tiene my-5 para separación externa) */
}

.agilizar-envios .container {
  /* puedes ajustar tipografías o colores base aquí si hiciera falta */
}

/* ----- Tarjetas (usa selectores bootstrap dentro del scope) ----- */
.agilizar-envios .card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.agilizar-envios .card:hover,
.agilizar-envios .card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

/* Imagen de la tarjeta */
.agilizar-envios .card .card-img {
  object-fit: cover;
  height: 100%;
  min-height: 220px;
}

/* Overlay con degradado para legibilidad */
.agilizar-envios .card .card-img-overlay {
  background: linear-gradient(180deg, rgba(3, 26, 41, 0) 30%, rgba(3, 26, 41, 0.75) 100%);
  padding: 1rem 1rem 1.1rem;
}

/* Títulos y textos dentro del overlay */
.agilizar-envios .card .card-img-overlay .h6 {
  margin: 0;
  line-height: 1.25;
}

.agilizar-envios .card .card-img-overlay .small {
  opacity: 0.9;
}

/* Redondeo de las tarjetas (refuerza utilidades usadas) */
.agilizar-envios .rounded-4 {
  border-radius: 1rem;
}

/* ----- Responsivo ----- */
@media (min-width: 992px) {
  .agilizar-envios .card .card-img {
    min-height: 240px;
  }
}

/* =========================================
   Scope: .transporte-multimodal
   ======================================= */

.transporte-multimodal {
  position: relative;
  /* color base del fondo (banda teal) */
  background: var(--azul-claro); /* puedes ajustar al brand exacto */
  padding: 45px 0;
  margin: 45px 0;
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

/* Bordes en ángulo (superior e inferior) usando pseudo-elementos */
.transporte-multimodal::before,
.transporte-multimodal::after {
  content: "";
  position: absolute;
  width: 100%;
}

.transporte-multimodal::before {

  left: 0;
  top: -50px;
  height: 50px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.transporte-multimodal::after {
  height: 50px;
  background: var(--texto);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.transporte-multimodal h3 {
color: var(--texto);
font-family: 'Ubuntu', sans-serif ;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.64px;
}
.transporte-multimodal p {
color: var(--texto);
font-family: 'Georama', sans-serif ;
font-size: 18px;
font-style: normal;         
font-weight: 300;
line-height: 32px; /* 133.333% */
letter-spacing: 0.96px;
}
.transporte-multimodal p b {
font-weight: 500;
}

/* ----- Tipografía del encabezado dentro de la sección ----- */
.transporte-multimodal .container .row:first-child .h4 {
  letter-spacing: 0.2px;
  color: var(--texto);
font-family: 'Ubuntu', sans-serif ;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.3px;
}

/* ----- Filas de contenido (bloques alternados) ----- */
.transporte-multimodal .row.g-0 > [class*="col-"] img.object-fit-cover {
  object-fit: cover;
  min-height: 220px; /* asegura presencia visual en pantallas chicas */
  margin-bottom: -2px;
}

/* “Tarjetas” de texto blancas (usando solo utilidades Bootstrap en HTML) */
.transporte-multimodal .bg-white {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Títulos dentro de las tarjetas */
.transporte-multimodal .bg-white .h5 {
  color: var(--azul-medio);
  font-family: 'Ubuntu', sans-serif ;
  font-size: 40px;
  font-weight: 500;
}
.transporte-multimodal .bg-white .h5 span {
  font-weight: 400;
}

/* Parrafos dentro de las tarjetas */
.transporte-multimodal .bg-white p {
  color: #24506a;
}

/* Nota inferior */
.transporte-multimodal p.text-center {
  font-family: 'Georama', sans-serif ;
  font-size: 24px;
  line-height: 36px; /* 150% */
  
}

/* ----- Responsive refinements ----- */
@media (min-width: 768px) {
  .transporte-multimodal .row.g-0 > [class*="col-"] img.object-fit-cover {
    min-height: 260px;
  }
}

@media (min-width: 992px) {
  .transporte-multimodal .row.g-0 > [class*="col-"] img.object-fit-cover {
    min-height: 280px;
  }
}


/* =========================================
   Scope: .almacenamiento-estrategico
   ======================================= */

.almacenamiento-estrategico {
  /* espacio y fondo propios podrían definirse aquí si hiciera falta */
}

/* Encabezados dentro de la sección */
.almacenamiento-estrategico h2.h4 {
  color: #0f2d3a;
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
}
.almacenamiento-estrategico p {
      color: var(--color-base);
    font-family: 'Georama', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.96px;
}
.almacenamiento-estrategico h3 {
  color: var(--azul-medio);
  font-family: 'Ubuntu', sans-serif ;
  font-size: 40px;
  font-weight: 400;
}

/* Filas alternadas con imagen y “tarjeta” blanca */
.almacenamiento-estrategico .row.g-0 > [class*="col-"] img.object-fit-cover {
  object-fit: cover;
  min-height: 220px;             /* presencia visual en móviles */
}

/* “Tarjetas” de texto blancas (apoyadas en utilidades Bootstrap del HTML) */
.almacenamiento-estrategico .bg-white {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.almacenamiento-estrategico .bg-white .h5 {
  /* color: #0f2d3a; */
}

/* Nota inferior */
.almacenamiento-estrategico .row:last-child p {
  color: #24506a;
  opacity: 0.95;
}

/* Hover/focus sutil sobre las “tarjetas” de texto (opcional) */
.almacenamiento-estrategico .bg-white:hover,
.almacenamiento-estrategico .bg-white:focus-within {
  transform: translateY(-1px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* ----- Responsive refinements ----- */
@media (min-width: 768px) {
  .almacenamiento-estrategico .row.g-0 > [class*="col-"] img.object-fit-cover {
    min-height: 260px;
  }
}

@media (min-width: 992px) {
  .almacenamiento-estrategico .row.g-0 > [class*="col-"] img.object-fit-cover {
    min-height: 280px;
  }
}

/* =========================================
   Scope: .despacho-aduanal
   Banda teal con diagonales + bloques alternados
========================================= */

.despacho-aduanal {
  position: relative;
  /* color base del fondo (banda teal) */
  background: var(--azul-claro); /* puedes ajustar al brand exacto */
  padding: 45px 0;
  margin: 45px 0;
  clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 97%);
}

/* Encabezado */
.despacho-aduanal .h4 {
  letter-spacing: 0.2px;
    color: var(--texto);
    font-family: 'Ubuntu', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.3px;
}

.despacho-aduanal p {
    color: var(--texto);
    font-family: 'Georama', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px; /* 133.333% */
    letter-spacing: 0.96px;
    
}

.despacho-aduanal h3.h5 {
    color: var(--texto);
    font-family: 'Ubuntu', sans-serif ;
    font-size: 40px;
    font-weight: 400;
    color: var(--azul-medio);
}

/* Filas alternadas (texto + imagen) */
.despacho-aduanal .row.g-0 > [class*="col-"] img.object-fit-cover {
  object-fit: cover;
  min-height: 220px;     /* asegura presencia visual en móviles */
}

/* Tarjetas de texto blancas */
.despacho-aduanal .bg-white {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.despacho-aduanal .bg-white .h5 {
  /* color: #0f2d3a; */
}

/* Nota inferior */
.despacho-aduanal p.text-center {
  opacity: 0.95;
}

/* Hover/focus sutil sobre tarjetas */
.despacho-aduanal .bg-white:hover,
.despacho-aduanal .bg-white:focus-within {
  transform: translateY(-1px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* Responsive refinements */
@media (min-width: 768px) {
  .despacho-aduanal .row.g-0 > [class*="col-"] img.object-fit-cover {
    min-height: 260px;
  }
}

@media (min-width: 992px) {
  .despacho-aduanal .row.g-0 > [class*="col-"] img.object-fit-cover {
    min-height: 280px;
  }
}

/* =========================================
   Scope: .cadena-suministro
   ======================================= */

.cadena-suministro {
  /* aquí puedes definir fondo propio si lo deseas */
}

/* Encabezado */


.cadena-suministro h2.h4 {
  color: #0f2d3a;
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
}
.cadena-suministro p {
      color: var(--color-base);
    font-family: 'Georama', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.96px;
}
.cadena-suministro p b {
  font-weight: 500;
}

.cadena-suministro p.opti-end {
  font-size: 24px;
}

/* ---- Tarjetas de sectores ---- */
.cadena-suministro .card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cadena-suministro .card:hover,
.cadena-suministro .card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

.cadena-suministro .card .card-img {
  object-fit: cover;
  height: 100%;
  min-height: 140px; /* altura compacta para chips/sector */
}

/* Overlay: oscurecido suave para legibilidad de la etiqueta */
.cadena-suministro .card .card-img-overlay {
  background:linear-gradient(180deg, rgba(3, 26, 41, 0) 20%, #26687f 100%);
  padding: 0.75rem;
}

/* Badge con nombre del sector */
.cadena-suministro .badge {
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 2px;
  font-family: 'Georama', sans-serif;
  /* backdrop-filter: saturate(1.2) blur(2px); */
  width: 100%;
}

/* ---- Bloque inferior (imagen + copy) ---- */
.cadena-suministro img.img-fluid.rounded-4 {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

/* Responsive tweaks */
@media (min-width: 992px) {
  .cadena-suministro .card .card-img {
    min-height: 160px;
  }
}
/* =========================================
   Scope: Nuestro Método
   ======================================= */
#metodo-biismart {

        background-size: 50%;
    background-attachment: fixed;
}
#metodo-biismart .contact-hero h1 {
    font-size: 60px;
   }

    #metodo-biismart .contact-hero p {
    font-size: 21px;
    color: var(--texto);
    font-family: 'Georama', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
  }
   #metodo-biismart .contact-hero p b {
    font-weight: 500;
   }
 .metodo-intro {
    font-family: 'Ubuntu', sans-serif;
    color: var(--azul-medio);
   }
   .metodo-intro p {
    font-size: 18px;
    font-weight: 600;
   }

   .metodo-intro h2 {
    font-size: 32px;
    color: var(--azul-medio);
    font-weight: 600;
    letter-spacing: 0.5px;
   }

   .metodo {
    background: radial-gradient(180.19% 90.27% at 30.72% 38.74%, #064F62 0%, #020E1A 100%);
  clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 95%);
  padding-bottom: 50px;
  }
   .metodo h5 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 40px;
    color: var(--texto);
    font-weight: 500;
    margin: 80px 0 0;
   }

   .bloques-metodo {
    margin-bottom: 45px;
   }
   .bloques-metodo h2 {
    color: var(--color-base);
    font-size: 36px;
    font-weight: 300 !important;
   }
    .bloques-metodo p {    
      font-size: 18px;
    color: var(--azul-medio);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px;
    }

    .bloques-metodo article div {
      background: #006178 ;
      text-align: center;
    color: var(--texto); 
    transition: ease 0.3s;
      transform: scale(0.95);
    }
    .bloques-metodo article div:hover {
      background: var(--color-base);
      transform: scale(1.05);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
     .bloques-metodo article img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      background: var(--texto);
      border-radius: 200px;
      margin-bottom: 20px;
      border: solid 3px var(--destaque-primario);
     }
    .bloques-metodo article h3 {
      font-size: 18px;
      font-weight: 500 !important;
      letter-spacing: 0.3px;
      font-family: 'Ubuntu', sans-serif;
    }
     .bloques-metodo article p {
      font-size: 15px;
      font-weight: 300;
    color: var(--texto);
    letter-spacing: normal;
      font-family: 'Ubuntu', sans-serif;

    }

  
/* =========================================
   Scope: About .about-page
   ======================================= */
   .about-page {
        background-size: 50%;
    background-attachment: fixed;
   }
   .about-hero {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
   }
   .about-hero p {
    text-shadow: 0 1px 1px #00000066;
   }
   .about-page h1 {
    font-weight: 500 !important;
    letter-spacing: 1px;
   }
   .about-page p {
    font-size: 18px;
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
   }
   .about-history h2 {
    color: var(--azul-medio);
    font-size: 48px;
    font-weight: 600;
   }
     .about-history p {
      font-family: 'Inter', sans-serif;
      font-size: 18px;
      color: var(--color-base);
      font-weight: 400;
     }

     .about-history p.fw-semibold {
      font-family: 'Ubuntu', sans-serif;
     }
     .empresas-grupo .card {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      padding: 30px !important;
      border-radius: 16px !important;
     }
     .empresas-grupo img {
      height: auto;
      width: 240px;
      object-fit: contain;
     }
      .empresas-grupo h3 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 24px;
    color: var(--color-base);
    font-weight: 400;
    letter-spacing: 1px;
      }
      .empresas-grupo p.small {
font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    color: var(--color-base);
    font-weight: 400;
    margin: 15px 0;
      }
      .empresas-grupo a.btn {
        background: var(--color-base);
        color: var(--texto) !important;
        text-transform: uppercase;
        padding: 15px 20px;
        transition: ease 0.3s;
      }
      .empresas-grupo a.btn:hover {
        background: var(--destaque-primario);
        transform: translateX(3px);
      }

      .valores {
        background: linear-gradient(360deg, #0d4b6100, #0d4b61) ;
        padding: 90px 0 45px;
        clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%)
      }
      .core-focus h2,
      .valores h2 {
        color: var(--color-base);
        font-family: 'Ubuntu', sans-serif;
        font-size: 48px;
        font-weight: 300;
      }
      #titulo-valores {
        color: var(--texto);
        text-align: center;
      }
      .core-focus .card,
      .valores .card {
        border-radius: 16px;
        overflow: hidden;
      }
      .core-focus .card img,
      .valores .card img {
        object-fit: cover;
      }
      .core-focus  h3,
      .valores  h3 {
        font-family: 'Ubuntu', sans-serif;
      font-size: 36px;
      color: var(--texto);
      font-weight: 500;
      }
      .core-focus ul,
      .valores  ul {
       padding: 0;
    list-style: none;
      }
      .core-focus .card ul li {}
      .valores .card ul li {
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--texto);
        font-family: 'Ubuntu', sans-serif;
        font-weight: 500;
        margin-bottom: 6px;
        text-shadow: 0px 1px 3px #01252A66;
      }
      .core-focus p {
        color: var(--azul-medio);
        font-family: 'Ubuntu', sans-serif;
        font-size: 21px;
        font-weight: 500;
      }

      .core-focus p.lead {
        color: var(--azul-medio);
        font-family: 'Inter', sans-serif;
        font-size: 21px;
        font-weight: 300;
        line-height: 30px;
      }


      .mision {
        padding: 45px 0 ;
      }

      .mision h3 {

        font-family: 'Ubuntu', sans-serif;
      font-size: 36px;
      color: var(--texto);
      font-weight: 500;
      }
      .mision p {

        font-size: 21px;
        letter-spacing: 2px;
        color: var(--texto);
        font-family: 'Ubuntu', sans-serif;
        font-weight: 300;
        margin-bottom: 6px;
        text-shadow: 0px 1px 3px #01252A66;
      }
      .mision p.lead {
        font-weight: 400;
      }


      .compromiso-excelencia {
        background: #0D4B61;
        padding: 120px 0 90px ;
        margin: 45px 0 0;
         clip-path: polygon(0% 0%, 100% 60px, 100% 100%, 0% 100%);
      }
      .compromiso-excelencia h2 {
        color: var(--texto);
        font-family: 'Ubuntu', sans-serif;
        font-size: 40px;
      }
      .compromiso-excelencia p {
        font-size: 21px;
        color: var(--texto);
        font-family: 'Inter', sans-serif;  
        margin-bottom: 30px; 
      }
      .compromiso-excelencia .card {
        border-radius: 16px;
        overflow: hidden;
      }
      .compromiso-excelencia .card .card-body {
        padding: 60px 45px 0;
      }

      .compromiso-excelencia .card .card-body h3 {
        color: #26687F;
        font-size: 36px;
        font-family: 'Ubuntu', sans-serif;
        font-weight: 400;
      }

      .compromiso-excelencia .card .card-body p {
        font-family: 'Inter', sans-serif;
        color: #26687F;
        font-size: 18px;
        font-weight: 400;
      }

/* ============================================================
   TEMPLATE: CONSULTORÍA DE COMPRAS EN ASIA (ES)
   Scope principal: #consultoria-compras
============================================================ */

#consultoria-compras {
}
  /* --------------------------------------------
     HERO PRINCIPAL
     .optichina-hero
  -------------------------------------------- */
 #consultoria-compras .optichina-hero {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
  }

  .optichina-hero .container {
  }

  .optichina-hero .row {
  }

 #consultoria-compras .optichina-hero h1 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 44px;
  font-weight: 300;
  }

 #consultoria-compras .optichina-hero h1 b {
  font-weight: 500;
 }
 #consultoria-compras .optichina-hero p {
  font-family: 'Georama', sans-serif;
  font-size: 18px;
      font-weight: 300;
    letter-spacing: 0.5px;
  }

 #consultoria-compras .optichina-hero .btn {
  margin: 30px 0 60px;
  }



  /* --------------------------------------------
     BLOQUE INTRO / SERVICIOS CLAVE
     .consultoria-compras-servicios
  -------------------------------------------- */
  .consultoria-compras-servicios {
    background-color:#0D4B61;
    padding: 90px 0;
    margin-top: -90px;
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
  }

  .consultoria-compras-servicios header {
  }

  .consultoria-compras-servicios h2 {
      color: var(--texto);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 1px;
    font-family: 'Ubuntu', sans-serif;
  }

  .consultoria-compras-servicios p {
color: var(--texto);
  font-family: 'Georama', sans-serif;
  font-size: 18px;
      font-weight: 300;
    letter-spacing: 1px;
  }


   .consultoria-compras-servicios .col-auto {
   }
  .consultoria-compras-servicios article {
  }
   .consultoria-compras-servicios article .item {
    margin-bottom: 15px !important;
    transition: ease 0.5s;
    transform: scale(0.95);
    padding:15px 30px 30px;
   }
    .consultoria-compras-servicios article .item:hover {
      transform: scale(1.05);
      background-color: var(--azul-oscuro);
      border-radius: 16px;
      box-shadow: 0px 5px 30px #005E76;
    }

  .consultoria-compras-servicios .row {
  }

  .consultoria-compras-servicios .icon-wrapper {
  }

  .consultoria-compras-servicios .icon-wrapper img {
    width: 106px;
    height: 106px;
    object-fit: cover;
    border-radius: 200px;
  }

  .consultoria-compras-servicios h3 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--destaque-secundario);
  }


  .consultoria-compras-servicios .btn {
        display: inline;
    width: fit-content;
  }



  /* --------------------------------------------
     SECCIÓN: ¿CÓMO TRABAJAMOS?
     #como-trabajamos
  -------------------------------------------- */
  #como-trabajamos {
    padding: 45px 0;
    background-repeat: repeat;
    background-size: 50%;
  }

  #como-trabajamos h3 {

      color: var(--color-base);
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 30px;
  }

  #como-trabajamos p {

        font-size: 18px;
        color: var(--color-base);
        font-family: 'Inter', sans-serif;  
        margin-bottom: 20px; 
  }

  #como-trabajamos img.trading {
    margin-top: 45px;
  }



  /* --------------------------------------------
     SECCIÓN: SOMOS TU ALIADO ESTRATÉGICO
     #aliado-estrategico
  -------------------------------------------- */
  #aliado-estrategico {
  }

   #como-trabajamos h4 {
    margin-top: 90px;    color: var(--color-base);
    font-size: 32px;
    font-weight: 600;
    font-family: 'Ubuntu', sans-serif;
    margin-bottom: 30px;
  }

  #aliado-estrategico .row {
  }

  #aliado-estrategico .object-fit-cover {
  }
  #como-trabajamos .allianz {
    background: var(--texto);
    box-shadow: 0 5px 10px #00788547;
  }

    #como-trabajamos .allianz h3 {
      color: var(--color-base);
    font-size: 32px;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif;
    }
     #como-trabajamos .allianz p {
      color: var(--color-base);
    font-size: 18px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    }



  /* ============================================================
   TEMPLATE: SERVICIO MARÍTIMO (ES)
   Scope principal: main.services
============================================================ */

main.services {}

  /* --------------------------------------------
     HERO CONTACTO
     .contact-hero
  -------------------------------------------- */
 main.services .contact-hero {
  }

 main.services .contact-hero .container {
  }

 main.services .contact-hero h4 {
      font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 32px;
    text-shadow: 0 2px 5px #01252A;
  }

 main.services .contact-hero h1 {
  font-size: 48px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
    text-shadow: 0 2px 5px #01252A;
  }

 main.services .contact-hero p {
  font-size: 18px;
  font-weight: 400;
  font-family: 'Georama', sans-serif;
    text-shadow: 0 2px 5px #01252A;
  }



  /* --------------------------------------------
     SECCIÓN: LOGÍSTICA DESDE CHINA CARDS
     .logistica-china-cards
  -------------------------------------------- */
 main.services .logistica-china-cards {
  }

 main.services .logistica-china-cards h2 {
  color: var(--azul-medio);
  font-size: 36px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
  margin: 30px 0;
  }

 main.services .logistica-china-cards .row.boxer {
      background: white;
    box-shadow: 0px 2px 10px #093b4840;
  }

 main.services .logistica-china-cards img {
  }

 main.services .logistica-china-cards .object-fit-cover {
  }

 main.services .logistica-china-cards h3 {
  color: var(--azul-medio);
  font-size: 36px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
  }

 main.services .logistica-china-cards p {
  font-size: 18px;
  font-weight: 400;
  color: var(--azul-medio);
  text-align: justify;
  }



  /* --------------------------------------------
     BLOQUES DE CONTENIDO (FCL, LCL, Break Bulk, Granel)
     Row genérico con imagen y texto
  -------------------------------------------- */

  .logistica-china-cards .row.align-items-stretch {
  }

  .logistica-china-cards .bg-white {
  }

  .logistica-china-cards .p-4,
  .logistica-china-cards .p-lg-5 {
  }



  /* --------------------------------------------
     SECCIÓN: OTROS SERVICIOS
     .otros-servicios
  -------------------------------------------- */
  .otros-servicios {
    margin-bottom: 60px;
  }

  .otros-servicios h5 {
  color: var(--azul-medio);
  font-size: 36px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
  margin: 60px 0 30px;
  }

  .otros-servicios .row {
  }

  .otros-servicios .card {
    border: none;
  }

  .otros-servicios .card img {
        height: 150px;
    object-fit: cover;
  }

  .otros-servicios .card-body {
        padding: 15px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .otros-servicios .card-title {
  margin: 0 0 10px;
  color: var(--azul-medio);
  font-size: 21px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300;
  }

  .otros-servicios .card-text {


  color: var(--azul-medio);
  font-size: 16px;
  line-height: 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  }

  .otros-servicios a {
    text-decoration: none;
    display: block;
transition: ease 0.3s;
    box-shadow: 0px 2px 10px #093b4840;
  }
  .otros-servicios a:hover {
    box-shadow: 0px 2px 15px #093b4874;
    transform: translateY(5px);
  }
    .otros-servicios a:hover .card-title {
      color: var(--color-secundario);
      font-weight: 400;
    }




  /* ============================================================
     MEDIA QUERIES
  ============================================================ */

  /* Tablets */
  @media (max-width: 991px) {
    .contact-hero {
    }

    .logistica-china-cards {
    }

    .otros-servicios {
    }
  }

  /* Mobile */
  @media (max-width: 576x) {
    .contact-hero {
    }

    .logistica-china-cards {
    }

    .otros-servicios {
    }
  }





  /* --------------------------------------------
     SECCIÓN: SOMOS TUS OJOS EN ASIA
     #ojos-asia
  -------------------------------------------- */
  #ojos-asia {
    text-align: center;
    background-size: cover;
  }

  #ojos-asia h6 {
    font-size: 40px;
    letter-spacing: 15px;
    color: #85D9BF;
    font-weight: 200;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    padding: 30px 0;
  }

  #ojos-asia h6 span {
    font-weight: 400;
  }



  /* --------------------------------------------
     UTILIDADES
  -------------------------------------------- */
  .object-fit-cover {
  }



  /* ============================================================
     MEDIA QUERIES
  ============================================================ */

  /* Tablets */
  @media (max-width: 991.98px) {
    .optichina-hero {
    }

    .consultoria-compras-servicios {
    }

    #como-trabajamos {
    }

    #aliado-estrategico {
    }

    #ojos-asia {
    }
  }

  /* Mobile */
  @media (max-width: 575.98px) {
    .optichina-hero {
    }

    .consultoria-compras-servicios {
    }

    #como-trabajamos {
    }

    #aliado-estrategico {
    }

    #ojos-asia {
    }
  }






/* =========================================
   Scope: .contact
   ======================================= */

   /* MAIN */
   main.contact {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
        background-size: 50%;
    background-attachment: fixed;
    }

    section.contact-hero {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

  main.contact .contact-hero p {
    font-size: 18px;
    color: var(--texto);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
  }

  /* CONTACT FORM */

  .contact-form-section {
  }

  .contact-form-section h2 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 40px;
    color: var(--azul-medio);
    margin: 45px 0 30px;
  }

  .contact-form-section .card {
  }
  .contact-form-section .card .card-body {
    padding: 30px !important;
  }
  .contact-form-section .card .card-body .wpcf7 {}

  .contact-form-section .card .card-body .wpcf7 p {
    padding: 0;
    margin: 0;
  }

  .contact-form-section .card .card-body .wpcf7 p label {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    color: var(--azul-medio);
  }

  .form-control::placeholder {
  color: #85D9BF;   
  font-style: italic;
}

  .contact-form-section .card .card-body .wpcf7 p label span {
  }

  .contact-form-section .card .card-body .wpcf7 p label textarea,
  .contact-form-section .card .card-body .wpcf7 p label input {
    border: solid 1px var(--destaque-primario);
    font-size: 16px;
    color: var(--color-base);
  }
   .contact-form-section .card .card-body .wpcf7 p .btn {
    background: var(--destaque-primario);
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--texto);
    transition: ease 0.3s;
   }
   .contact-form-section .card .card-body .wpcf7 p .btn:hover {
    background-color: var(--color-base);
    transform: translateX(3px);
   }
  .contact-form-section .card .card-body .wpcf7 p label span .wpcf7-not-valid-tip {
    color: #d24f4f;
    font-size: 12px;
  }
    .contact-form-section .card .card-body .wpcf7 .wpcf7-response-output {
      margin: 15px 0 0;
      text-align: center;
      color: var(--color-base);
    }

    /* OFFICES MAP */
    .offices-map {
      margin-top: -60px;
    }

    .offices-map .translate-middle {
      display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    }
    .offices-map .translate-middle .rounded-pill {
      border-radius: 200px !important;
      background: var(--azul-claro);
      font-size: 32px;
    }
    .offices-map .translate-middle .rounded-pill span:first-child {
      line-height: 24px;
    }
        .offices-map .translate-middle .rounded-pill .me-2 {}
.offices-map .translate-middle .rounded-pill .bi {
          font-size: 16px;
        }
        .offices-map .translate-middle .rounded-pill .small {
          font-family: 'Ubuntu', sans-serif;
          font-size: 18px;
          color: var(--texto);
          font-weight: 400 !important;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          border-left: solid 1px var(--destaque-secundario);
          padding-left: 6px;
        }

  /* OFFICES LIST */

  .offices-list {
    margin-top: -180px;
  }
  .offices-list h2 {
    color:var(--azul-medio);
    font-size: 32px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 600;
  }

  .offices-list h5 {

    color:var(--azul-medio);
    font-size: 24px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
  }
  .offices-list h5 img {
   margin-right: 10px;
    object-fit: contain;
    width: 64px;
    height: 64px;
  }
  .offices-list .card {
    box-shadow: 0 3px 10px 0 rgba(38, 104, 127, 0.30) !important;
    color: var(--color-base);
  }

  .offices-list .card .card-body {}

  .offices-list .card .card-body h6 {
      color: var(--color-base);
      font-size: 24px;    
      display: flex;
    flex-direction: row;
    align-items: center;
  
  }
  .offices-list .card .card-body h6 span {
    font-size: 36px;
    margin-right: 10px;
  }
    .offices-list .card .card-body p {
      color: var(--color-base);
      font-size: 16px;
    }
    .offices-list .card .card-body p strong {
      
        color: #138C90;
    font-size: 14px;
    font-weight: 400;
    }
     .offices-list .card .card-body p a {
      color: var(--color-base);
      font-size: 18px;
      text-decoration: none;
     }
     .offices-list .card .card-body p a:hover {
      color: var(--destaque-primario);
     }

     .offices-list .switch-visibility {
      display: none;
     }




/* QUOTE */

     .quote-cta {
      background-color: var(--azul-oscuro-2);
      clip-path: polygon(0% 0%, 100% 5%, 100% 100%, 0% 100%);
      }
      .quote-cta h2 {
        font-family: 'Ubuntu', sans-serif;
        font-size: 40px;
        font-weight: 500;;
      }

      .quote-cta p {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 300;
      }

      .quote-cta a {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        color: var(--texto);
        transition: ease 0.3s;
        text-transform: uppercase;
      }
      .quote-cta a:hover {
        color: var(--color-base);
        transform: translateX(5px);
        background: var(--texto);
        box-shadow: -6px 3px 10px rgba(0,0,0,0.3);
      }




      /* ============================================================
   TEMPLATE: LOGÍSTICA DESDE CHINA (ESP)
   Scope principal: #logistica-china
============================================================ */

/* --------------------------------------------
   HERO PRINCIPAL
   .optichina-hero
-------------------------------------------- */
#logistica-china .optichina-hero {
  height: 500px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}
#logistica-china .optichina-hero:after {
  background: linear-gradient(270deg, rgb(29 39 57 / 0%) 0%, rgb(29 39 57 / 75%) 70%);
}


#logistica-china .optichina-hero h1 {
  letter-spacing: 2px;
  font-weight: 600;
  margin-top: 60px;
}

#logistica-china .optichina-hero p {
  font-family: 'Georama', sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 1px;
}
#logistica-china .optichina-hero a {
  margin-top: 30px;
}



/* --------------------------------------------
   BLOQUE INTRO / SERVICIOS CLAVE
   .optichina-servicios
-------------------------------------------- */
#logistica-china .optichina-servicios {
}

#logistica-china .optichina-servicios header {
}

#logistica-china .optichina-servicios h2 {
  margin-top: 60px;
}

#logistica-china .optichina-servicios p {
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 1px;
}
#logistica-china .optichina-servicios p b {
  font-weight: 500;
}



/* --------------------------------------------
   SECCIÓN DE CARDS / SERVICIOS
   .logistica-china-cards
-------------------------------------------- */
#logistica-china .logistica-china-cards {
}

#logistica-china .logistica-china-cards .row {
  box-shadow: 0px 3px 15px #26687f4f;
}

#logistica-china .logistica-china-cards img {
}

/* Bloque 1 */
#logistica-china .logistica-china-cards h3 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: var(--color-base);
}
#logistica-china .logistica-china-cards h3 span {
  font-weight: 300;
}
#logistica-china .logistica-china-cards ul {
    font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-base);
}



/* Nota final */
#logistica-china .logistica-china-cards p {
    font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-base);
  text-align: justify;
}

#logistica-china .logistica-china-cards p b {
  font-weight: 600;
}



/* --------------------------------------------
   UTILIDADES INTERNAS
-------------------------------------------- */
#logistica-china .object-fit-cover {
  object-fit: cover;
}




/* --------------------------------------------
   MOBILE FIXES
-------------------------------------------- */

@media (max-width: 576px) {
  footer p.final-message {
    font-size: 16px;
    text-align: center;
  }
  footer .small {
    text-align: center;
    margin: 15px 0;
  }
  footer  .form-select  {
    text-align: center;
    display: block;
    width: 100% !important;
  }
  footer #menu-footer_menu_eng,
  footer #menu-footer_menu {
    text-align: center;
    margin: 15px 0 30px;
    padding: 0;
  }
  footer .rrss {
    justify-content: center;
  }
}

@media screen and (max-width:576px){
  section.valor-equipo-section h2.fw-bold {
    font-size: 32px;
  }
  .valor-container {
    width: 360px;
    height: 360px;
    margin: 0px 0 30px;
  }

  .valor-container-inner {
        width: 280px;
    height: 280px;
  }
  .valor-container-center {
        width: 200px;
    height: 200px;
  }
  .valor-container-center img {
    width: 100px;
  }
  .global {
     left: 45px;
    top: 20px;
}
.logo-show {
  width: 100px;
}
.company .card {
  
        width: 200px;
        left: 0;
}
.company .card img {
  width: 120px;
}
.trading .card {
    top: 30px;
    left: -100px !important;
}
.biilinx .card {
    top: -110px;
    left: -90px !important;
}
.biisensing .card {
    top: -170px;
    left: -50px !important;
}
.company .card p {
    font-size: 14px;
    line-height: 16px;
}
a.btn,
section.service-integral-section a.btn,
.choose-us-section a.btn,
section.nuestras-oficinas-section a.btn,
section.valor-equipo-section a.btn {
  font-size: 14px;
  padding: 10px 20px;
}
.service-card .service-card__title {
  font-size: 21px;
}
.service-card .card-body img {
  width: 160px;
}
.service-card .service-card__subtitle {
  font-size: 18px;
}
header .custom-logo-link img {
  max-width: 140px;
}
section.service-integral-section h2,
section.testimonials-section h2,
section.nuestras-oficinas-section h2,
.blog-section h2,
.contact-form-section h2,
.quote-cta h2,
#metodo-biismart .contact-hero h1,
.bloques-metodo h2,
.about-history h2,
#consultoria-compras .optichina-hero h1,
.core-focus h2, 
.valores h2,
.mision h3,
.cadena-suministro h2.h4,
.compromiso-excelencia h2,
.almacenamiento-estrategico h2.h4,
.metodo h5,
.consultoria-compras-servicios h2,
#como-trabajamos h4,
#como-trabajamos h3,
.choose-us-section h2 {
  font-size: 32px !important;
}
.choose-us-section .card-item_biis img {
  margin-bottom: 0;
}
.section.service-integral-section p,
section.valor-equipo-section p,
section.nuestras-oficinas-section p,
.quote-cta p,
#metodo-biismart .contact-hero p,
.bloques-metodo p,
.about-history p,
.consultoria-compras-servicios p,
#logistica-china .logistica-china-cards p,
#logistica-china .logistica-china-cards ul,
.despacho-aduanal p,
.valores .card ul li,
#como-trabajamos .allianz p,
.about-page p,
#logistica-china .optichina-servicios p,
#como-trabajamos p,
.transporte-multimodal p.text-center,
.choose-us-section p.medium {
  font-size: 16px !important;
  line-height: 22px !important;
}
#como-trabajamos .allianz h3,
section.testimonials-section h4 {
  font-size: 18px !important;
}
.offices-list h5 {
  display: none;
}
section.about-history img,
section.contact-hero img {
  width: 200px;
    margin: 15px auto;
    display: block;
}
.metodo img.img-fluid {
  margin: 30px 0 !important;
}
.bloques-metodo {
  margin: 0;
}
section.contact-hero {
  margin-top: -40px !important;
}
footer,
footer ul.list-unstyled li {
  text-align: center;
}
.main-nav .nav {
        height: 100vh;
        background: linear-gradient(to bottom, #ffffff 65%, #ffffff3d 90%);
    }
.nav li a {
  padding: 6px 10px;
}
#about-biismart section.about-hero {
      background-position: 60% 70% !important;
    background-size: cover;
}
.empresas-grupo .card {
  padding: 10px !important;
}
.about-history .card-body img {
  width: 150px;
}
.empresas-grupo h3 {
  letter-spacing: 0;
  font-weight: 400 !important;
}
.empresas-grupo p.small {
  margin: 10px 0;
}
.empresas-grupo a.btn {
  padding: 10px;
}
    .compromiso-excelencia .card .card-body {
        padding: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: linear-gradient(to top, rgb(3 49 65), rgb(6 43 55 / 0%));
    }

.featured-container .entry-title,
.compromiso-excelencia .card .card-body h3{
  color: var(--texto);
  font-size: 28px;
}
.compromiso-excelencia .card .card-body p {
  color: var(--texto);
}
.compromiso-excelencia .card .card-body h3,
.compromiso-excelencia .card .card-body p {
  text-shadow: 3px 2px 10px #033141;
}
.valores .card ul li {
  letter-spacing: 0;
}
.core-focus h3, .valores h3 {
  font-size: 26px;
}
.optichina-hero h1 {
  font-weight: 500 !important;
    letter-spacing: 1px;
}
.transporte-multimodal .bg-white .h5,
.almacenamiento-estrategico h3,
.despacho-aduanal h3.h5{
  font-size: 28px;
}

#logistica-china .logistica-china-cards h3 {
  font-size: 21px;
}
.optichina-servicios article a,
.optichina-servicios article .card .card-img-overlay {
  height: 180px;
}
.consultoria-compras-servicios,
.transporte-multimodal {
  clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
}
.cadena-suministro img.card-img {
  height: 100px !important;
}
#ojos-asia {
  background-size: cover;
        background-position: right center;
}
#ojos-asia h6 {
  font-size: 20px;
    letter-spacing: 4px;
}

.consultoria-compras-servicios .col-auto {
  width: 100%;
}
.consultoria-compras-servicios .icon-wrapper img {
  width: 76px;
    height: 76px;
}
.consultoria-compras-servicios h3 {
  font-size: 18px;
}
.consultoria-compras-servicios .row {
    justify-content: center !important;
}
.consultoria-compras-servicios article .item {
  padding: 15px 15px 30px;
  text-align: center;
  background: #020e1a16;
  border-radius: 16px;
  transform: scale(0.85);
}
.consultoria-compras-servicios article .item:hover {
  transform: scale(0.95);
}
#about-biismart section.about-hero:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: red;
}
#logistica-china .optichina-hero p,
.optichina-servicios h2 {
  font-size: 21px;
  font-weight: 500 !important;
}
.otros-servicios .card {
  margin-bottom: 30px;
}
.otros-servicios .card-body {
  min-height: auto;
}

.featured-caption {
    background: #09475d4a;
    outline: solid 200px #09475d4a;
}

.featured-container.text-center {
    overflow: hidden;
}

}