/* === Inversión (inversion.html) === */

/* Navbar + compensación */
:root{ --navbar-h:72px; }
body.page-inversion{ padding-top: var(--navbar-h); }

.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 con imagen de fondo
   IMPORTANTE: esta ruta es relativa a ESTE CSS: ../images/inversion-header.jpg
   Si ponés la imagen en /assets/images/inversion-header.jpg, dejá así */
.page-header{
  position: relative;
  width: 100%;
  margin-top: calc(var(--navbar-h) * -1);
  min-height: 42vh;
  z-index: 1;
  overflow: hidden;
}
.header-inversion{
  background-image: url("../images/inversion-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 992px){
  .page-header{ min-height: 56vh; }
}
/* overlay para contraste */
.page-header::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Tipografía más nítida */
h1,h2,h3,p{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Callout + highlight */
.callout{
  background: #15aae110;
  border: 1px solid #15aae130;
  border-radius: .5rem;
}
.highlight{
  font-style: italic;
  color: #0d1b2a;
  background: #15aae108;
  border-left: 4px solid #15aae1;
  padding: .75rem 1rem;
  border-radius: .25rem;
}

/* KPIs */
.kpi .card-body{
  display:flex; flex-direction:column; align-items:flex-start;
}
.kpi i{ font-size: 1.35rem; color:#15aae1; }
.kpi .label{ margin:.35rem 0 0; color:#6c757d; }
.kpi .value{ font-size:1.25rem; font-weight:700; margin: 0; color:#0d1b2a; }

/* Checklist */
.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{ display:flex; align-items:flex-start; gap:.5rem; margin-bottom:.5rem; }
.checklist i{ line-height:1.4; color:#15aae1; }

/* CTA barra */
.cta--bar{
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:#15aae1; color:#fff; border-radius:.5rem; padding:1rem 1.25rem;
}
.cta--bar .btn-primary{ background:#fff; color:#15aae1; border-color:#fff; }

/* Utilidades */
.me-2{ margin-right:.5rem; }

/* Bloque de valores */
.value-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.value-block .currency {
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d; /* gris suave */
}

.value-block .amount {
  font-size: 1.8rem;
  font-weight: 700;
  color: #212529; /* texto fuerte */
}

/* ===== Header con video de fondo ===== */
.header-inversion{
  position: relative;
  min-height: 70vh;              /* podés ajustar 70–90vh */
  margin-top: calc(var(--navbar-h, 72px) * -1);
  color: #fff;
  overflow: clip; /* evita scrolls raros del iframe */
}

/* Capa del video ocupando todo */
.header-inversion .video-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000; /* fallback mientras carga */
}

/* Iframe escalado para "cover" en cualquier proporción */
.header-inversion .video-iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  /* Por defecto: cubrir alto de viewport */
  height: 100vh;
  width: 177.78vh; /* 16:9 -> 100 * (16/9) */
  transform: translate(-50%, -50%);
  pointer-events: none; /* evita clics sobre el video */
}

/* Si la pantalla es más ancha (landscape), ajustá a ancho */
@media (min-aspect-ratio: 16/9){
  .header-inversion .video-iframe{
    width: 100vw;
    height: 56.25vw; /* 9/16 de ancho */
  }
}

/* Overlay: gradiente sutil similar a los headers anteriores */
.header-inversion .video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.85) 0%,
    rgba(0,58,102,0.75) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Contenido encima del video */
.header-inversion .content-on-video{
  z-index: 2;
  position: relative;
}

/* Por si querés que el header tenga una altura mínima en mobile */
@media (max-width: 575.98px){
  .header-inversion{ min-height: 60vh; }
}