/* ==========================================
   SECCIÓN: Consejo Directivo
   container: 1284
   card: 396x422
   foto: 396x300
   badge logo: 107x107
   hover overlay: 60%
   ========================================== */

.cd-board{
  padding: 80px 0;
  background: #fff;
}

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

/* Tabs */
.cd-board__tabs{
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.cd-tab{
  min-width: 260px;
  height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #f2f2f2;
  color: #7b7b7b;
 
  cursor: pointer;
}

.cd-tab.is-active{
  background: var(--verde-100, #6bb400);
  color: #fff;
  font-weight: 700;
}

/* Panels */
.cd-panel{
  display: block;
}
.cd-panel[hidden]{
  display: none !important;
}

/* Grid */
.cd-grid{
  display: grid;
  grid-template-columns: repeat(3, 396px);
  gap: 32px;
  justify-content: space-between; /* clava como maqueta */
}

/* Card base */
/* .cd-card{
  width: 396px;
  height: 422px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
  overflow: hidden;
  position: relative;
} */

.cd-card{
  width: 396px;
  height: 450px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
  position: relative;

  overflow: visible; /* ✅ IMPORTANTE: no recorta el badge al subir */
  transition: transform .2s ease;
}
.cd-card:hover{
  transform: translateY(-2px);
}

/* Media */
/* .cd-card__media{
  width: 396px;
  height: 300px;
  position: relative;
  overflow: hidden;
} */

.cd-card__media{
  width: 396px;
  height: 300px;
  position: relative;

  overflow: hidden;                 /* ✅ recorta SOLO la foto */
  border-radius: 22px 22px 0 0;     /* ✅ respeta esquinas arriba */
}

.cd-card__media img{
  width: 396px;
  height: 300px;
  object-fit: cover;
  display: block;
}
/* .cd-card__media img{
  width: 396px;
  height: 300px;
  object-fit: cover;
  display: block;
} */

/* Badge 107x107 */

 .cd-card__badge{
  position: absolute;
  right: 20px;
  bottom: 99px;     /* posición normal */
  width: 107px;
  height: 107px;
  border-radius: 50%;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
box-shadow: 0 22px 45px rgba(0,0,0,.12);
  transition: transform .28s ease;
  z-index: 3;
}


.cd-card__badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Puntito verde */
.cd-card__dot{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--verde-100, #6bb400);
}

/* Overlay blanco que sube 60% */
.cd-card__overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(255,255,255);
  transform: translateY(100%);
  transition: transform .28s ease;
  z-index: 2;
}

/* Content */
.cd-card__content{
  height: calc(422px - 300px);
  /* padding: 18px 22px 18px; */
  padding:44px 22px 10px;
  position: relative;
  overflow: visible;
  z-index: 4; 
}

.cd-card__body{
  transform: translateY(0);
  transition: transform .28s ease;
}

/* Al hover: sube 50% del alto del body (aprox) */
.cd-card:hover .cd-card__body{
  transform: translateY(-260px);
}
.cd-card:hover .cd-card__badge{
  transform: translateY(-220px);
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
}

/* Texto base */
.cd-card__name{
  margin: 0 0 6px;
  color: var(--azul2-100);
  
}

.cd-card__role{
  margin: 0;
  color: var(--azul-60);
  font-size: 18px;
  line-height: 1.3;
}

/* Detalle oculto hasta hover */
.cd-card__detail{
  margin: 14px 0 0;
  color: var(--texto-100);
 
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .22s ease, transform .22s ease;
  max-height: 0;
  overflow: hidden;
}

/* Hover: aparece overlay + detalle */
.cd-card:hover .cd-card__overlay{
  transform: translateY(0);
}

.cd-card:hover .cd-card__detail{
  opacity: 1;
  transform: translateY(0);
  max-height: 250px; /* controla cuánto texto aparece */
}


/* Opcional: suave lift */
.cd-card{
  transition: transform .2s ease;
}
.cd-card:hover{
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1280px){
  .cd-grid{
    grid-template-columns: repeat(2, 396px);
    justify-content: center;
  }
}

@media (max-width: 860px){
  .cd-board__tabs{
    gap: 12px;
    flex-wrap: wrap;
  }

  .cd-tab{
    min-width: 220px;
  }

  .cd-grid{
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .cd-card{
    width: min(396px, 100%);
  }

  .cd-card__media,
  .cd-card__media img{
    width: 100%;
  }
}


/* ================================
   Comité consultivo – variante simple
   ================================ */

/* Esta grilla solo aplica a este panel */
.cd-grid--center-last{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ✅ centra últimas filas */
  gap: 32px;
}

/* Card sin hover */
.cd-card--simple{
  height: 460px;
}

/* Desactiva comportamientos del hover avanzado */
.cd-card--simple .cd-card__overlay,
.cd-card--simple .cd-card__badge{
  display: none !important;
}

.cd-card--simple:hover{
  transform: none;
}

.cd-card--simple .cd-card__body{
  transform: none !important;
}

/* Media mantiene medidas */
.cd-card--simple .cd-card__media{
  height: 300px;
}

/* Content normal */
.cd-card--simple .cd-card__content{
  padding: 18px 22px 20px;
}

/* Texto */
.cd-card--simple .cd-card__name{
  margin-bottom: 6px;
}

.cd-card--simple .cd-card__role{
  margin: 0;
  line-height: 1.35;
}


/* Mantiene grid de 3 columnas, pero centra última fila si sobran 1 o 2 */
.cd-grid.cd-grid--center-lastrow{
  justify-content: center;       /* ✅ en vez de space-between */
  column-gap: 32px;              /* tu gap */
  row-gap: 32px;
}

/* Si quedan 1 o 2 cards en la última fila, las centramos ocupando la col 2 y 3 */
.cd-grid.cd-grid--center-lastrow > .cd-card:nth-last-child(2){
  grid-column: 2;                /* primera de las 2 de abajo */
}
.cd-grid.cd-grid--center-lastrow > .cd-card:last-child{
  grid-column: 3;                /* segunda de las 2 de abajo */
}

/* Caso especial: si SOLO queda 1 en la última fila (4 items total en grid de 3) */
.cd-grid.cd-grid--center-lastrow > .cd-card:nth-last-child(1):nth-child(4){
  grid-column: 2;                /* la centra sola */
}


/* ==========================================
   Comité científico (cards sin hover + bandera)
   card: 396x422
   foto: 396x300
   bandera: 57x57
   ========================================== */

.cs-card{
  width: 396px;
  height: 535px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
  overflow: hidden;
  position: relative;
}

/* media */
.cs-card__media{
  width: 396px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.cs-card__media > img{
  width: 396px;
  height: 300px;
  display: block;
  object-fit: cover;
}

/* bandera (círculo) */
.cs-flag{
  position: absolute;
  right: 18px;
  top: calc(300px - 28.5px);  /* ✅ mitad de 57px sobre el corte foto/contenido */
  width: 57px;
  height: 57px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  z-index: 5;
}

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


/* contenido */
.cs-card__content{
  height: calc(422px - 300px);
  padding: 26px 22px 0px;
  /* padding: 18px 22px 18px; */
  /* text-align: center; */
}

.cs-card__name{
  margin: 0 0 6px;
  color: var(--azul2-100);
}

.cs-card__role{
  margin: 0;
  color: var(--azul-60);
  font-size: 12px;
  line-height: 1.35;
}

/* Responsive igual a tus otros paneles */
@media (max-width: 1280px){
  /* tu .cd-grid ya baja a 2 columnas, no tocar */
}

@media (max-width: 860px){
  .cs-card{
    width: min(396px, 100%);
  }

  .cs-card__media,
  .cs-card__media > img{
    width: 100%;
  }
}



p.cd-card__role.body-3.f16 {
    font-size: 18px;
}