/*
 * 16-razones-layout.css - '¿Por que asistir?' layout final: proporcion imagen/texto 80-20 que pasa a 70-30 en hover o foco.
 * Origen: index.html, <style> #4 (desde la linea 1). Contenido identico al original.
 */
/* ===== ¿POR QUÉ ASISTIR? — layout final ===== */
#razones .cards4{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
  max-width:1280px!important;
}
#razones .info-card{
  position:relative!important;
  width:100%!important;
  height:450px!important;
  min-height:450px!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:#121212!important;
  box-shadow:none!important;
  transform:none!important;
  transition:border-color .5s ease,background .5s ease!important;
}
#razones .info-card:hover,
#razones .info-card:focus-visible{
  box-shadow:none!important;
  transform:none!important;
  border-color:rgba(255,255,255,.20)!important;
  outline:none!important;
}
/* Imagen: 80% normal → 70% en hover, igual que el código solicitado. */
#razones .info-photo-wrap{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:80%!important;
  overflow:hidden!important;
  border-radius:18px 18px 0 0!important;
  transition:height .5s ease-in-out!important;
}
#razones .info-card:hover .info-photo-wrap,
#razones .info-card:focus-visible .info-photo-wrap{
  height:70%!important;
}
#razones .info-photo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  object-fit:cover!important;
  object-position:center!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  transition:transform .7s ease-in-out!important;
}
#razones .info-card:hover .info-photo,
#razones .info-card:focus-visible .info-photo{
  transform:scale(1.05)!important;
}
#razones .info-photo-gradient{
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(to top,#121212,transparent 58%)!important;
  pointer-events:none!important;
}
/* Texto: 20% normal → 30% en hover. */
#razones .info-content{
  position:absolute!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:20%!important;
  padding:16px 24px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  background:#121212!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:height .5s ease-in-out!important;
  z-index:2!important;
}
#razones .info-card:hover .info-content,
#razones .info-card:focus-visible .info-content{
  height:30%!important;
}
#razones .info-content h3{
  margin:0 0 4px!important;
  font-family:Inter,system-ui,sans-serif!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  color:#fff!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  transition:transform .5s ease-in-out!important;
}
#razones .info-card:hover .info-content h3,
#razones .info-card:focus-visible .info-content h3{
  transform:translateY(-1px)!important;
}
#razones .info-description{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  transition:grid-template-rows .5s ease-in-out,opacity .5s ease-in-out!important;
}
#razones .info-card:hover .info-description,
#razones .info-card:focus-visible .info-description{
  grid-template-rows:1fr!important;
  opacity:1!important;
}
#razones .info-description-inner{overflow:hidden!important;}
#razones .info-description p{
  margin:0!important;
  padding-top:8px!important;
  border-top:1px solid rgba(255,255,255,.05)!important;
  font-size:12px!important;
  line-height:1.55!important;
  color:#999!important;
}
@media(max-width:900px){
  #razones .cards4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
  #razones .cards4{grid-template-columns:1fr!important}
  #razones .info-card{height:450px!important;min-height:450px!important}
}