/* ====== NOSOTROS (nosotros.html) ====== */

/* Altura de la navbar y compensación */
:root { --navbar-h:72px; }
body.page-nosotros { padding-top: var(--navbar-h); }

/* Navbar transparente/solid (igual al index) */
.navbar.navbar-dark { transition: background-color .2s ease, box-shadow .2s ease; }
.navbar.navbar-dark:not(.navbar-solid){ background: transparent; box-shadow: none; }
.navbar.navbar-dark.navbar-solid{
  background:#193a62;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  backdrop-filter: saturate(120%) blur(4px);
}

/* ====== HEADER ====== */
.header-nosotros{
  position: relative;
  width: 100%;
  min-height: 85vh;
  margin-top: calc(var(--navbar-h) * -1);
  background: url("../images/header-nosotros.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  color: #fff;
}
@media (min-width: 992px){
  .header-nosotros{ min-height: 85vh; }
}

/* overlay */
.header-nosotros::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* contenedor interno para el texto del header */
.header-nosotros .header-content{
  position: relative;
  padding: 2.5rem 0;
}

/* Eyebrow (como el ejemplo adjunto) */
.eyebrow{
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#cfcfcf;
  margin-bottom:.5rem;
}

/* Headline grande tipo “ALTA RENTABILIDADE…” */
.headline-xl{
  font-weight:800;
  font-size: clamp(2rem, 3.8vw + 1rem, 4rem);
  line-height:1.05;
  color:#fff;
}

/* ====== SECCIONES GENERALES ====== */
.section{ padding: 3rem 0; }
.section--light{ background:#f8f9fa; }
.section h2{ font-weight:800; color:#111; }
.section p{ color:#555; }

/* Lista con bullets para los puntos */
.bullets{ padding-left: 1.1rem; margin: 0; }
.bullets li{ margin:.35rem 0; }

/* ====== TIMELINE ====== */
/* Timeline */
.timeline {
  position: relative;
  padding-left: 1.75rem; /* más espacio para los bullets */
  border-left: 3px solid #e9ecef;
}

.timeline__item {
  position: relative;
  margin-bottom: 1rem;
  line-height: 1.5;
  padding-left: 1rem; /* separa el texto del borde */
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -13px;   /* mueve la bolita más a la izquierda */
  top: .45rem;   /* alinea verticalmente con el texto */
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: #0d6efd;
  box-shadow: 0 0 0 3px #e9f0ff;
}

/* ====== VALORES (cards) ====== */
.values .card{
  border:1px solid #e9ecef;
  border-radius:.75rem;
  height:100%;
}
.values .card-body{ padding:1.25rem; }
.values .icon{
  font-size:1.75rem; line-height:1; width:2.25rem; height:2.25rem;
  display:grid; place-items:center; border-radius:.5rem; margin-bottom:.5rem;
  background:#0d6efd10; color:#0d6efd;
}

/* ====== QUOTE DESTACADA ====== */
.quote-banner{
  background:#f2f4f8;
  border-left:6px solid #193a62;
  padding:1.25rem 1.5rem;
  border-radius:.5rem;
  font-style:italic;
  font-size: clamp(1.05rem, .9vw + .9rem, 1.35rem);
  color:#1f2937;
}

/* Utilidades */
.text-muted-80{ color:#7a7a7a; }

/* Sección compromiso mitad imagen mitad texto */
.compromiso-section {
  position: relative;
  min-height: 50vh;
}

.compromiso-img {
  background-image: url("../images/compromiso.jpg"); /* cámbiala por tu imagen */
  background-size: cover;
  background-position: center;
  min-height: 300px; /* altura mínima en mobile */
}

@media (min-width: 992px) {
  .compromiso-img {
    min-height: 60vh; /* ocupa toda la altura de la sección en desktop */
  }
}

/* Bullets personalizados */
.bullets {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
}
.bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0d6efd; /* azul corporativo */
  font-weight: bold;
}

/* ===== DIFERENCIAL (mitad texto / mitad imagen con icono) ===== */
.diferencial-section {
  position: relative;
  min-height: 50vh;
}

.diferencial-img {
  background-image: url("../images/nave.jpg"); /* cámbiala por tu imagen */
  background-size: cover;
  background-position: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  .diferencial-img { min-height: 60vh; }
}

/* Icono GIF sobre la imagen */
.diferencial-icon {
  max-width: 250px; /* ajustá según tu GIF */
  height: auto;
  z-index: 2;
  animation: floatIcon 4s ease-in-out infinite;
}

/* Animación suave tipo “flotar” */
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===== Valores ===== */
.values .card {
  border: 1px solid #e9ecef;
  border-radius: .75rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.values .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.values .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;         /* centra todo horizontalmente */
  justify-content: flex-start; /* inicio vertical */
  padding: 1.25rem 1rem;
}

/* Contenedor del ícono */
.values .icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;               /* centra el <i> dentro del círculo */
  align-items: center;
  justify-content: center;
  margin: 0 auto .75rem auto;
  background: rgba(21,170,225,.12); /* suave del primario */
  border: 1px solid rgba(21,170,225,.25);
}

/* Ícono FA centrado y grande */
.values .icon i {
  font-size: 30px;
  line-height: 1;
  color: var(--bs-primary, #15aae1);
  display: inline-block;
}

/* Título y texto */
.values h5 {
  margin: .25rem 0 .25rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.values p {
  font-size: .95rem;
}

/* Utilidad para un gris 80% (si no existe) */
.text-muted-80 { color: rgba(0,0,0,.6); }

/* Responsive: ícono un toque más chico en XS si querés */
@media (max-width: 575.98px) {
  .values .icon { width: 64px; height: 64px; }
  .values .icon i { font-size: 26px; }
}