.tr-transparencia {
  padding-top: 140px;
  padding-bottom: 100px;
  background: #fff;
  overflow: hidden;
}
.tr-container {
  max-width: 1094px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  display: flex;
  align-items: center;
}

.tr-media {
  width: 655px;
  height: 552px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tr-card-wrap {
  position: absolute;
  top: 70%;
  left: calc(655px - 154px);
  transform: translateY(-50%);
  z-index: 2;
}

.tr-card {
  width: 570px;
}
.transparencia-texto {
  color: var(--azul-oscuro-100);
}


/* ==========================================
   EHR – Beneficios empresas miembro
   container: 1284
   gap columnas: 56
   ========================================== */

.ehr-beneficios{
  padding: 72px 0;
  background: #fff;
}

.ehr-beneficios__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.ehr-beneficios__title{
  margin: 0 0 34px;
  text-align: center;
  color: var(--azul2-100);
}

/* 2 columnas */
.ehr-beneficios__grid{
  display: grid;
  grid-template-columns: 520px 1fr; /* izquierda fija (ajusta si tu SVG pide otro ancho) */
  gap: 56px;
  align-items: center;
}

/* Izquierda */
.ehr-beneficios__left{
  display: flex;
  justify-content: center;
}

.ehr-beneficios__orb{
  width: 100%;
  max-width: 362px;
  height: auto;
  display: block;
}

/* Derecha */
.ehr-beneficios__right{
  display: flex;
  flex-direction: column;
  gap: 26px;
}


.ehr-beneficios__item{
  display: grid;
  grid-template-columns: 159px 1fr; /* ✅ igual al orbe real */
  gap: 24px;                         /* ✅ como tu maqueta */
  align-items: center;               /* ✅ centra texto vs orbe */
}


.ehr-beneficios__mini{
  width: 159px;
  height: 159px;
  flex: none;
}

.ehr-beneficios__mini img{
  width: 159px;
  height: 159px;
  display: block;
  object-fit: contain;
}

.ehr-beneficios__body{
  padding-top: 6px; /* opcional, si quieres bajar/subir un toque */
}

/* Textos */
.ehr-beneficios__h{
  margin: 0 0 10px;
  color: var(--azul-oscuro-100);
}

.ehr-beneficios__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ehr-beneficios__list li{
  position: relative;
  padding-left: 24px;
  color: var(--azul-oscuro-100);
  line-height: 1.55;
}

/* Check naranja como before */
.ehr-beneficios__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 16px;
  height: 16px;
  background: url("../images/iconos/checks_orange.svg") no-repeat center;
  background-size: contain;
}

/* Responsive */
@media (max-width: 1100px){
  .ehr-beneficios__grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ehr-beneficios__orb{
    max-width: 420px;
  }
}

@media (max-width: 560px){
  .ehr-beneficios__item{
    grid-template-columns: 64px 1fr;
    gap: 14px;
  }

  .ehr-beneficios__mini img{
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 820px){
  .ehr-beneficios__item{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ehr-beneficios__mini{
    width: 159px;
    height: 159px;
  }
}


/* ==========================================
   Oportunidad sector privado
   container: 1284
   card img: 408x283
========================================== */

.op-privado{
  padding: 80px 0;
  background: #fff;
}

.op-privado__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.op-privado__title{
  text-align: center;
  margin-bottom: 48px;
  color: var(--azul2-100);
}

/* Grid */
.op-privado__grid{
  display: grid;
  grid-template-columns: repeat(3, 408px);
  gap: 24px;
  justify-content: space-between;
}

/* Card */
.op-privado__card{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Imagen */
.op-privado__media{
  width: 408px;
  height: 283px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

.op-privado__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto */
.op-privado__text{
  margin: 0;
  color: var(--azul-oscuro-100);
  line-height: 1.4;
  font-weight: 600;
}

@media (max-width: 1280px){
  .op-privado__grid{
    grid-template-columns: repeat(2, 408px);
    justify-content: center;
  }
}

@media (max-width: 900px){
  .op-privado__grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .op-privado__media{
    width: 100%;
    max-width: 408px;
  }
}


/* ==========================================
   Espacios destacados de la Red + Wave
   wave: images/wave-testimonios.svg
========================================== */

/* 1) Wave independiente */
.edr-wave{
  width: 100%;
  height: 277px; /* AJUSTA: usa el alto real que te calzó (ej: 277) */
  background: url("../images/wave/wave-testimonios.svg") no-repeat center top;
  background-size: cover; /* o contain si tu SVG no debe recortarse */
  background-color: #fff; /* el wave es blanco */
}

/* 2) Sección con fondo (la que “entra” debajo del wave) */
.edr{
  background: var(--azul-10); /* o el celeste que uses */
  padding: 60px 0 90px;       /* ajusta según maqueta */
  margin-top: -16px;          /* ✅ para fusionar con el wave (como ya te funcionó) */
}

.edr__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.edr__title{
  text-align: center;
  margin: 0 0 32px;
  color: var(--azul2-100);
}

/* descargas */

.sd-descargas {
  padding: 40px 0;
  background: var(--azul-10);
}
.sd-descargas-container {
  max-width: 1284px;
  margin: 0 auto;
}
.sd-descargas-row {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.sd-descarga-btn {
  width: 530px;
  height: 128px;
  background: #2b87c6;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  text-decoration: none;
  box-shadow: 0 18px 35px rgba(0,0,0,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

.sd-descarga-text {
  color: #fff;
}

.sd-descarga-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 1180px){
  .sd-descargas-row{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .sd-descarga-btn{
    width: min(530px, 100%);
  }
}