/* Rejilla de programas en la home. Usa los tokens de color de Framer que ya
   declara la página, con el hex como reserva. */

.lv-progs {
  --lv-navy: var(--token-b194b957-29b9-4452-aed5-5eebd04d0a28, #031c4c);
  --lv-azul: var(--token-92431cbb-1a2c-4e45-b933-21a48ecaa8ca, #1baaff);
  --lv-hueso: var(--token-b1290a7e-6abc-4af3-b391-f5b18b68dbdf, #f3f1f0);
  padding: 96px 24px;
  background: var(--lv-navy);
  /* El contenedor de Framer deja 16px a cada lado y detrás hay fondo blanco:
     la sombra extiende el navy hasta el borde sin ensanchar la caja, así que
     no aparece scroll horizontal. */
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax var(--lv-navy);
}

.lv-progs__caja {
  max-width: 1200px;
  margin: 0 auto;
}

.lv-progs__cabecera {
  max-width: 720px;
  margin: 0 auto 52px;
  text-align: center;
}

/* El h2 y el h4 se clonan del propio documento para heredar la tipografía. El
   h2 viene de una sección de fondo claro y trae color #212121, ilegible sobre
   navy: aquí se corrige eso y el margen de su sección de origen. */
.lv-progs__cabecera > * { margin: 0; }
.lv-progs__cabecera > * + * { margin-top: 18px; }
.lv-progs__cabecera > *,
.lv-progs__cabecera > * * {
  color: var(--lv-hueso);
  -webkit-text-fill-color: var(--lv-hueso);
}

.lv-progs__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) { .lv-progs__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  {
  .lv-progs__rejilla { grid-template-columns: 1fr; }
  .lv-progs { padding: 64px 20px; }
}

.lv-prog {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  color: var(--lv-hueso);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

.lv-prog:hover,
.lv-prog:focus-visible {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .07);
  border-color: color-mix(in srgb, var(--lv-acento) 45%, transparent);
}
.lv-prog:focus-visible { outline: 2px solid var(--lv-acento); outline-offset: 3px; }

.lv-prog__icono {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--lv-acento) 16%, transparent);
  color: var(--lv-acento);
}
.lv-prog__icono svg { width: 22px; height: 22px; display: block; }

.lv-prog__titulo {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.lv-prog__texto {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(243, 241, 240, .72);
  margin: 0 0 22px;
  max-width: 34ch;
}

.lv-prog__mas {
  margin-top: auto;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--lv-acento);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lv-prog__mas svg { width: 15px; height: 15px; transition: transform .22s ease; }
.lv-prog:hover .lv-prog__mas svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .lv-prog, .lv-prog__mas svg { transition: none; }
  .lv-prog:hover { transform: none; }
}

/* «Bajada de peso» encima del nombre del tratamiento: dice de qué familia es
   sin repetirlo en cada título. */
.lv-prog__grupo {
  display: block;
  margin-bottom: 4px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--lv-acento, #1baaff);
  opacity: .85;
}