/* ===== Navbar reveal en Sponsors: igual que Home ===== */
.sponsors-landing .navbar{
  transform: translateY(-110%);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}
.sponsors-landing.nav-visible .navbar{
  transform: translateY(0);
  opacity: 1;
}

/* ===== Tarjetas de sponsors ===== */
.s-card{
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--igem-stroke, rgba(0,0,0,.08));
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;              /* Indica que es interactiva */
  user-select: none;
}
.s-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
  border-color: var(--igem-accent, #10b981);
}

/* Área fija para logos (evita saltos entre tarjetas) */
.s-card-media{
  height: 140px;
  width: 100%;
  margin-bottom: .75rem;
}
@media (min-width: 1400px){
  .s-card-media{ height: 160px; }
}

/* El logo siempre cabe y se centra sin deformarse */
.logo-box{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: .5rem;
  overflow: hidden;
  background: rgba(0,0,0,.02);
  border-radius: .75rem;
  border: 1px dashed var(--igem-stroke, rgba(0,0,0,.08));
}
.logo-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

/* Título y texto */
.s-card-title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: .5rem 0 .25rem;
  color: var(--igem-text, #111827);
}

/* Panel colapsable (oculto por defecto) */
.s-card-collapse{
  overflow: hidden;                      /* Oculta contenido cuando está colapsado */
  max-height: 0;                         /* Estado inicial cerrado */
  transition: max-height .3s ease;       /* Animación suave */
  will-change: max-height;
}
.s-card-text{
  font-size: .975rem;
  color: var(--igem-muted, #4b5563);
  margin: .5rem 0 .75rem;
}

/* Acciones (si las agregas en futuro) */
.s-card-actions{
  margin-top: auto;
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

/* Ajuste opcional del ancho del container en pantallas grandes */
@media (min-width: 1600px){
  .sponsors-landing .container{
    max-width: 1240px;
  }
}

/* Panel colapsable: cerrado por defecto */
.s-card-collapse{
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}

/* Abierto (valor alto para permitir varias líneas de texto) */
.s-card.is-open .s-card-collapse{
  max-height: 1200px; /* ajusta si alguna descripción es más larga */
}

/* Área media para mantener logos alineados */
.s-card-media{
  height: 140px;
  width: 100%;
  overflow: hidden;
  border-radius: .75rem;
  background: rgba(0,0,0,.02);
  display: grid;
  place-items: center;
  border: 1px dashed var(--igem-stroke, rgba(0,0,0,.08));
  margin-bottom: .75rem;
}
.s-card-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Contenedor del texto colapsable (mismo patrón que Previous Generations) */
.desc[data-desc]{
  max-height: 0;               /* colapsado por defecto */
  overflow: hidden;
  transition: max-height .35s ease;
}

/* Opcional: estilos de tarjeta como en sponsors */
.s-card{
  background: rgba(255,255,255,.96);
  border: 1px solid var(--igem-stroke, rgba(0,0,0,.08));
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer; /* indica que se puede interactuar */
}
.s-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
  border-color: var(--igem-accent, #10b981);
}

.s-card-title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: .5rem 0 .25rem;
  color: var(--igem-text, #111827);
}
.s-card-body p{
  color: var(--igem-muted, #4b5563);
}

@media (min-width: 1600px){
  .sponsors-wrap .container{ max-width: 1240px; }
}

/* ===== Contenido expandible: estructura y tipografía ===== */
.s-card-body{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* Transición suave al abrir/cerrar y pequeño separador */
.desc[data-desc]{
  /* ya tienes la transición de max-height; agrego padding/borde con transición */
  transition: max-height .35s ease, padding-top .25s ease, border-top-color .25s ease;
  padding-top: 0;
  border-top: 1px solid transparent;
}

/* Cuando la tarjeta está expandida, dar aire arriba y un divisor tenue */
.prevgen-card[aria-expanded="true"] .desc{
  padding-top: .75rem;
  border-top-color: var(--igem-stroke, rgba(0,0,0,.10));
}

/* Párrafos internos: justificados, negro, legibles */
.desc[data-desc] p{
  margin: 0 0 .85rem 0;
  text-align: justify;
  text-justify: inter-word;   /* mejor distribución */
  color: #111;                /* negro */
  line-height: 1.75;
  font-size: 1rem;
  text-wrap: pretty;
  hyphens: auto;              /* cortes de palabra suaves donde aplique */
}
.desc[data-desc] p:last-child{
  margin-bottom: 0;
}

/* Panel expandible: evitar que el contenido final quede tapado */
.desc[data-desc]{
  overflow: hidden; /* necesario para animar max-height */
  transition: max-height .35s ease, padding .25s ease, border-top-color .25s ease;
  padding-top: 0;
  padding-bottom: 0;           /* colapsado: sin padding */
  border-top: 1px solid transparent;
}

/* Al expandir: aire arriba y abajo + divisor tenue */
.prevgen-card[aria-expanded="true"] .desc{
  padding-top: .75rem;
  padding-bottom: .75rem;      /* 👉 evita el “corte blanco” al final */
  border-top-color: var(--igem-stroke, rgba(0,0,0,.10));
}

/* Párrafos bien presentados */
.desc[data-desc] p{
  margin: 0 0 .85rem 0;
  text-align: justify;
  text-justify: inter-word;
  color: #111;                 /* negro */
  line-height: 1.75;
  font-size: 1rem;
  text-wrap: pretty;
  hyphens: auto;
}
.desc[data-desc] p:last-child{ margin-bottom: 0; }

/* Asegurar que el H1 herede el estilo cromático de section-title (como “Our Sponsors”) */
.pg-header .section-title{
  /* si tenías color especial para .section-title, aquí se aplica al H1 */
  color: var(--igem-text, #111827);
}

/* Ensure parent cards and wrapper don't clip the animated panel */
.sponsors-wrap .glass-card{ overflow: visible; }

/* Safety: if any parent had overflow hidden, let the expandable content breathe */
.prevgen-card, .s-card { overflow: visible; }