.liam-val-wrap{
  font-family:'Poppins',sans-serif;
}
.liam-val-wrap *,.liam-val-wrap *::before,.liam-val-wrap *::after{box-sizing:border-box}

.liam-val-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
@media(max-width:900px){
  .liam-val-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .liam-val-grid{grid-template-columns:1fr}
}

.liam-val-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%; /* junto con el grid (align-items:stretch por defecto), iguala el alto de toda la fila */
}

/* Recuadro del ícono: oculto por defecto (alto 0), se abre con el hover. */
.liam-val-icono-wrap{
  max-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--liam-val-icono-bg,#FFFFFF);
  border:0 solid var(--liam-val-icono-borde,#E0DDD8);
  transition:max-height var(--liam-val-duracion,300ms) ease,border-width var(--liam-val-duracion,300ms) ease;
}
.liam-val-icono{
  font-size:var(--liam-val-icono-tamano,24px);
  line-height:1;
  color:var(--liam-val-icono-color,#7D1C1C);
  opacity:0;
  padding:16px 0;
  transition:opacity .2s ease;
  display:inline-flex;
}

/* Imagen propia subida en vez del ícono de librería: usa la misma
   variable de tamaño que el ícono de fuente, para que el control
   "Tamaño" (en Estilo > Ícono) funcione igual con ambos. */
.liam-val-icono-img{
  width:var(--liam-val-icono-tamano,24px);
  height:var(--liam-val-icono-tamano,24px);
  object-fit:contain;
  display:block;
}

.liam-val-card:hover .liam-val-icono-wrap{
  /* Alto automático: tamaño del ícono + el espaciado (arriba+abajo) que
     pongas en "Espaciado alrededor del ícono", más el "Alto extra"
     opcional. Así el marco crece solo cuando agrandas el ícono o el
     espaciado, sin tener que cuadrar un tercer control a mano. */
  max-height:calc(var(--liam-val-icono-tamano,24px) + var(--liam-val-icono-pad-top,16px) + var(--liam-val-icono-pad-bottom,16px) + var(--liam-val-alto-extra,0px));
  border-width:1px;
}
.liam-val-card:hover .liam-val-icono{
  opacity:1;
  transition:opacity .2s ease .12s;
}

/* Dispositivos sin hover (táctiles): el ícono queda siempre visible, para
   que su información no dependa de un gesto que no existe en celular/tablet. */
@media(hover:none){
  .liam-val-icono-wrap{
    max-height:calc(var(--liam-val-icono-tamano,24px) + var(--liam-val-icono-pad-top,16px) + var(--liam-val-icono-pad-bottom,16px) + var(--liam-val-alto-extra,0px)) !important;
    border-width:1px !important;
  }
  .liam-val-icono{
    opacity:1 !important;
  }
}

.liam-val-cuerpo{
  background:var(--liam-val-fondo,#7D1C1C);
  border-radius:var(--liam-val-radio,12px);
  padding:20px;
  transition:border-radius var(--liam-val-duracion,300ms) ease;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Dirección "arriba": el recuadro del ícono va antes del cuerpo y se abre
   hacia arriba (el cuerpo pierde sus esquinas superiores redondeadas). */
.liam-val-card.liam-val-dir-arriba .liam-val-icono-wrap{
  order:-1;
  border-radius:var(--liam-val-radio,12px) var(--liam-val-radio,12px) 0 0;
}
.liam-val-card.liam-val-dir-arriba:hover .liam-val-cuerpo{
  border-radius:0 0 var(--liam-val-radio,12px) var(--liam-val-radio,12px);
}

/* Dirección "abajo": el recuadro del ícono va después del cuerpo y se abre
   hacia abajo (el cuerpo pierde sus esquinas inferiores redondeadas). */
.liam-val-card.liam-val-dir-abajo .liam-val-icono-wrap{
  order:1;
  border-radius:0 0 var(--liam-val-radio,12px) var(--liam-val-radio,12px);
}
.liam-val-card.liam-val-dir-abajo:hover .liam-val-cuerpo{
  border-radius:var(--liam-val-radio,12px) var(--liam-val-radio,12px) 0 0;
}

.liam-val-titulo{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--liam-val-texto-color,#FFFFFF);
  margin:0 0 10px;
}

.liam-val-descripcion{
  font-family:'Poppins',sans-serif;
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  color:var(--liam-val-texto-color,#FFFFFF);
}
.liam-val-descripcion p{margin:0}
.liam-val-descripcion strong{
  font-weight:700;
  color:var(--liam-val-negrita-color,inherit);
}