/* Liorat Core - Service Item Component (Card Style) */

.lsi-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px; /* Un poco menos de espacio interno */
  align-items: center;
  
  /* --- NUEVOS ESTILOS DE TARJETA --- */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,.08);
  padding: 32px;
  margin-bottom: 32px; /* Espacio entre las tarjetas de servicio */
}

/* Lado de la imagen */
.lsi-item__image img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* Un radio más sutil para el interior de la tarjeta */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: block;
}

/* Lado del contenido */
.lsi-item__content {
  padding: 0; /* Ya no necesita padding, lo tiene la tarjeta principal */
}

.lsi-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 8px;
  color: #111;
}

.lsi-price {
  font-size: 20px;
  font-weight: 600;
  color: #4b5563;
  margin: 0 0 20px;
}

.lsi-description {
  color: #333;
  line-height: 1.7;
}

.lsi-description p {
  margin: 0 0 1em;
}

.lsi-description ul {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.lsi-description ul li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}

.lsi-description ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: 800;
  color: #111;
}

.lsi-cta {
  margin-top: 32px;
}

/* Botón base */
.lsi-btn,
.lsi-btn:link,
.lsi-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #fff;                   /* color fijo */
  padding: 14px 28px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  transition: background-color .2s, color .2s;
}

/* Hover / Focus / Active: solo cambio de fondo, el texto sigue blanco */
.lsi-btn:hover,
.lsi-btn:focus,
.lsi-btn:active {
  background: #333;
  color: #fff;                   /* <- evita que lo sobreescriba un a:hover global */
  text-decoration: none;
  outline: none;
}

/* Accesibilidad: anillo visible al navegar con teclado */
.lsi-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(17,17,17,.15);
  background: #333;
  color: #fff;
}

/* (Opcional) si el tema insiste en forzar color en enlaces dentro del componente */
.lsi-item .lsi-btn:hover { color:#fff; }
/* En último recurso (no recomendado salvo necesario):
.lsi-btn:hover { color:#fff !important; }
*/

/* --- Modificador para alternar el diseño --- */
.lsi-item--image-right .lsi-item__image {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.lsi-item--image-right .lsi-item__content {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* --- Adaptación para Móviles --- */
@media (max-width: 768px) {
  .lsi-item,
  .lsi-item--image-right {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 24px;
    padding: 24px;
  }

  .lsi-item--image-right .lsi-item__image,
  .lsi-item--image-right .lsi-item__content {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Contenedor principal para centrar el contenido */
.liorat-content-wrapper {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* === Ajustes mínimos solicitados === */

/* 1) Tarjetas más anchas (aprovecha mejor el contenedor) */
.liorat-content-wrapper{
  max-width: 1240px;               /* antes 1100px */
  padding-left: clamp(12px, 2vw, 20px);
  padding-right: clamp(12px, 2vw, 20px);
}

/* 2) Menos “aire” dentro de la tarjeta y entre columnas */
.lsi-item{
  gap: 24px;                        /* antes 32px */
  padding: 24px;                    /* antes 32px */
}
@media (min-width: 1024px){
  .lsi-item{
    gap: 28px;                      /* un poco más en desktop, pero contenido compacto */
    padding: 28px;
  }
}

/* 3) Reduce interlineado del texto y márgenes internos */
.lsi-description{ line-height: 1.55; }   /* antes 1.7 */
.lsi-description p{ margin: 0 0 .7em; }  /* antes 1em */
.lsi-description ul{ margin-top: 14px; } /* antes 20px */
.lsi-description ul li{ margin-bottom: 8px; } /* antes 10px */
.lsi-description ul li::before{ top: .05em; } /* alinea el check con la primera línea */

/* 4) Evita que el borde “se pierda” en móvil: gutters más pequeños pero seguros */
@media (max-width: 768px){
  .liorat-content-wrapper{
    padding-left: 12px;
    padding-right: 12px;
  }
  .lsi-item{
    border-radius: 16px;           /* para que no se vea cortado contra el borde de pantalla */
  }
}

/* 5) Imagen más controlada (sin columnas gigantes en scroll largo) */
.lsi-item__image{
  aspect-ratio: 3 / 2;             /* mantiene proporción sin saltos; cámbialo si prefieres 4/3 */
  overflow: hidden;
}
.lsi-item__image img{
  height: 100%;
  object-fit: cover;
}

/* 6) Título y precio un pelín más compactos */
.lsi-title{ margin: 0 0 6px; }
.lsi-price{ margin: 0 0 14px; font-size: 18px; } /* antes 20px */