/* Bloques de detalle de las fichas. Mismos tokens de color que declara Framer,
   con el hex como reserva; misma caja y mismo full-bleed que la rejilla de
   programas, para que un bloque insertado no se distinga de una sección real. */

.lv-bloque {
  --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);
  --lv-tinta: #10203f;
  padding: 92px 24px;
  background: var(--lv-navy);
  color: var(--lv-hueso);
  /* El contenedor de Framer deja 16px a cada lado con fondo blanco detrás: la
     sombra extiende el color hasta el borde sin ensanchar la caja. */
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax var(--lv-navy);
}

/* Variante clara, para alternar con las secciones oscuras de la página. */
.lv-bloque--claro {
  background: var(--lv-hueso);
  color: var(--lv-tinta);
  box-shadow: 0 0 0 100vmax var(--lv-hueso);
}

.lv-bloque__caja { max-width: 1180px; margin: 0 auto; }

/* Las secciones del export llevan las esquinas redondeadas. Mientras todas eran
   blancas no se notaba; al intercalar bloques de color aparecían cuatro muescas
   con el color de al lado asomando. Se cuadran solo las caras que se tocan. */
.lv-bloque + * {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
:is(section, div, main):has(+ .lv-bloque) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Las secciones de texto del export: los párrafos alineados a la derecha se
   leen mal en un bloque largo, y las listas venían pegadas unas a otras. */
#te-ayudamos .framer-text { text-align: left !important; }
#todo-en-uno li.framer-text,
#te-ayudamos li.framer-text { margin-bottom: 10px; line-height: 1.55; }

.lv-bloque__cabecera {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}
/* Los titulares se clonan del documento: traen el color de su sección de
   origen (a veces #212121 sobre navy, ilegible) y su margen. Se normaliza. */
.lv-bloque__cabecera > * { margin: 0; }
.lv-bloque__cabecera > * + * { margin-top: 18px; }
.lv-bloque__cabecera > *,
.lv-bloque__cabecera > * * {
  color: var(--lv-hueso);
  -webkit-text-fill-color: var(--lv-hueso);
}
.lv-bloque--claro .lv-bloque__cabecera > *,
.lv-bloque--claro .lv-bloque__cabecera > * * {
  color: var(--lv-tinta);
  -webkit-text-fill-color: var(--lv-tinta);
}

.lv-bloque__entrada {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  opacity: .78;
}

.lv-bloque__rejilla { display: grid; gap: 18px; }
.lv-bloque__rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.lv-bloque__rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.lv-bloque__rejilla--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
  .lv-bloque__rejilla--3,
  .lv-bloque__rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lv-bloque { padding: 62px 20px; }
  .lv-bloque__rejilla { grid-template-columns: 1fr !important; }
  .lv-bloque__cabecera { margin-bottom: 38px; }
}

.lv-tarj {
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
}
.lv-bloque--claro .lv-tarj {
  background: #fff;
  border-color: rgba(16, 32, 63, .1);
  box-shadow: 0 2px 14px rgba(16, 32, 63, .05);
}

.lv-tarj__icono {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--lv-azul) 15%, transparent);
  color: var(--lv-azul);
}
.lv-tarj__icono svg { width: 21px; height: 21px; display: block; }

.lv-tarj__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--lv-azul);
  border: 1.5px solid color-mix(in srgb, var(--lv-azul) 55%, transparent);
}

.lv-tarj__titulo {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.015em;
  margin: 0 0 9px;
  color: inherit;
}

.lv-tarj__texto {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.58;
  margin: 0;
  color: rgba(243, 241, 240, .74);
}
.lv-bloque--claro .lv-tarj__texto { color: rgba(16, 32, 63, .72); }

/* Enlaces al pie de un bloque (ver todas las opiniones, ir a Google…). */
.lv-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.lv-accion {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--lv-hueso);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background-color .16s ease, border-color .16s ease;
}
.lv-accion:hover { background: rgba(255, 255, 255, .09); }
.lv-accion--pri {
  background: var(--lv-azul);
  border-color: var(--lv-azul);
  color: #041228;
}
.lv-accion--pri:hover { background: #47bbff; border-color: #47bbff; }

.lv-bloque--claro .lv-accion { color: var(--lv-tinta); border-color: rgba(16, 32, 63, .2); }
.lv-bloque--claro .lv-accion:hover { background: rgba(16, 32, 63, .06); }
.lv-bloque--claro .lv-accion--pri { color: #fff; background: var(--lv-azul); border-color: var(--lv-azul); }

/* Fuentes al pie del bloque, cuando se cita un estudio. */
.lv-bloque__pie {
  max-width: 820px;
  margin: 30px auto 0;
  text-align: center;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(243, 241, 240, .5);
}
.lv-bloque--claro .lv-bloque__pie { color: rgba(16, 32, 63, .52); }

/* Opiniones dentro de una ficha */
.lv-cita {
  padding: 24px 22px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  flex-direction: column;
}
.lv-bloque--claro .lv-cita {
  background: #fff;
  border-color: rgba(16, 32, 63, .1);
  box-shadow: 0 2px 14px rgba(16, 32, 63, .05);
}

.lv-cita__estrellas { display: inline-flex; gap: 3px; margin-bottom: 13px; color: #f5a623; }
.lv-cita__estrellas svg { width: 15px; height: 15px; display: block; }

.lv-cita__txt {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 16px;
  color: rgba(243, 241, 240, .82);
}
.lv-bloque--claro .lv-cita__txt { color: rgba(16, 32, 63, .8); }

.lv-cita__autor {
  margin: auto 0 0;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: inherit;
  opacity: .75;
}

/* Apariciones en prensa */
.lv-medio {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: transform .18s ease, border-color .18s ease;
}
.lv-medio:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lv-azul) 45%, transparent); }
.lv-bloque--claro .lv-medio {
  background: #fff;
  border-color: rgba(16, 32, 63, .1);
  box-shadow: 0 2px 14px rgba(16, 32, 63, .05);
}

.lv-medio__foto {
  display: block;
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, .25);
}
.lv-medio__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lv-medio__cuerpo { display: flex; flex-direction: column; padding: 18px 20px 20px; flex: 1 1 auto; }

.lv-medio__medio {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lv-azul);
  margin-bottom: 8px;
}

.lv-medio__titular {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.015em;
  margin-bottom: 14px;
}

/* La cabecera del medio, como logo. Altura fija y ancho libre: cada marca
   tiene su proporción y forzarlas todas al mismo ancho las deforma. */
.lv-medio__logo { display: block; height: 22px; margin-bottom: 12px; }
.lv-medio__logo img {
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
/* Cada medio da su logo en el color que le conviene a SU web: unos negros,
   otros blancos, otros de su color de marca. Puestos todos juntos, la mitad
   desaparecería contra el fondo. Se aplastan a un solo tono —negro sobre claro,
   blanco sobre oscuro—: se pierde el color de marca y se gana que se lean
   todos y que la fila tenga una sola voz. */
.lv-medio__logo img { filter: brightness(0) invert(1); opacity: .9; }
.lv-bloque--claro .lv-medio__logo img { filter: brightness(0); opacity: .82; }

/* «Leer el artículo» como botón: es la acción de la tarjeta, no una nota.
   `margin-top: auto` lo empuja al fondo de la tarjeta: los titulares miden
   entre dos y cinco líneas, y sin esto cada botón caía a una altura distinta
   y la fila parecía descuadrada. */
.lv-medio__btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--lv-hueso);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.lv-medio:hover .lv-medio__btn {
  background: var(--lv-azul);
  border-color: var(--lv-azul);
  color: #041228;
}
.lv-bloque--claro .lv-medio__btn { color: var(--lv-tinta); border-color: rgba(16, 32, 63, .22); }
.lv-bloque--claro .lv-medio:hover .lv-medio__btn { color: #fff; }

.lv-medio__mas {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14px;
  color: rgba(243, 241, 240, .55);
}
.lv-bloque--claro .lv-medio__mas { color: rgba(16, 32, 63, .55); }

@media (prefers-reduced-motion: reduce) {
  .lv-medio:hover { transform: none; }
}

/* Testimonio en vídeo */
.lv-video {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}
.lv-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
}
.lv-bloque--claro .lv-video video { box-shadow: 0 12px 34px rgba(16, 32, 63, .16); }

.lv-video figcaption {
  margin-top: 16px;
  text-align: center;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(243, 241, 240, .6);
}
.lv-bloque--claro .lv-video figcaption { color: rgba(16, 32, 63, .6); }

/* Bloque de aviso: un solo recuadro para los matices que piden prudencia
   (p. ej. la terapia hormonal), en lugar de una rejilla de tarjetas sueltas. */
.lv-aviso {
  max-width: 880px;
  margin: 0 auto;
  padding: 34px 34px 30px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid color-mix(in srgb, var(--lv-azul) 30%, transparent);
}
.lv-bloque--claro .lv-aviso {
  background: #fff;
  border-color: rgba(16, 32, 63, .12);
}

.lv-aviso__fila + .lv-aviso__fila {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.lv-bloque--claro .lv-aviso__fila + .lv-aviso__fila { border-top-color: rgba(16, 32, 63, .09); }

.lv-aviso__fila h3 {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 7px;
  color: inherit;
}
.lv-aviso__fila p {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  color: rgba(243, 241, 240, .76);
}
.lv-bloque--claro .lv-aviso__fila p { color: rgba(16, 32, 63, .74); }

.lv-aviso__pie {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(243, 241, 240, .55);
}
.lv-bloque--claro .lv-aviso__pie {
  border-top-color: rgba(16, 32, 63, .09);
  color: rgba(16, 32, 63, .55);
}

@media (max-width: 640px) {
  .lv-aviso { padding: 26px 22px 24px; }
}

/* Banda de llamada a la acción a media página.

   Es una banda, no una sección: ocupa lo que ocupa una fila y se lee de un
   vistazo —cuánto cuesta, qué incluye, dónde se pulsa—. Va en horizontal en
   escritorio y se apila en móvil. Lleva color propio en vez de heredar el del
   bloque para que destaque igual sobre fondo navy que sobre fondo hueso. */
.lv-bloque--cta { padding: 52px 24px; }

.lv-cta {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 34px 38px;
  border-radius: 24px;
  background: linear-gradient(112deg, #052a6e 0%, #0b53b8 62%, #1baaff 145%);
  color: #fff;
  text-align: left;
}
.lv-cta__txt { flex: 1 1 auto; min-width: 0; }
.lv-cta__cifra {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0 0 6px;
  color: #7fd0ff;
}
.lv-cta__tit {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.lv-cta__sub {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .84);
  max-width: 60ch;
}
.lv-cta__btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 16px 30px;
  border-radius: 999px;
  background: #fff;
  color: #052a6e;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lv-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

@media (max-width: 860px) {
  .lv-bloque--cta { padding: 40px 20px; }
  .lv-cta {
    display: block;
    padding: 28px 24px;
    border-radius: 20px;
  }
  .lv-cta__cifra { font-size: 34px; }
  .lv-cta__tit { font-size: 21px; }
  .lv-cta__sub { font-size: 16px; }
  .lv-cta__btn { display: block; margin-top: 22px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-cta__btn:hover { transform: none; }
}

/* Tarjeta de prensa con entradilla, para el histórico completo */
.lv-medio__entradilla {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 8px 0 16px;
  color: rgba(243, 241, 240, .6);
  /* Tres líneas: las entradillas van de una a ocho según el medio, y sin tope
     una sola tarjeta estiraba toda la fila. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.lv-bloque--claro .lv-medio__entradilla { color: rgba(16, 32, 63, .62); }
.lv-medio__tambien {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  margin: -6px 0 16px;
  color: rgba(243, 241, 240, .42);
}
.lv-bloque--claro .lv-medio__tambien { color: rgba(16, 32, 63, .45); }
.lv-medio--largo .lv-medio__mas { margin-top: 14px; }

/* ── Definición ──────────────────────────────────────────────────────────────
   Una frase grande y sus apoyos en una fila con separadores. Deliberadamente
   NO es una rejilla de tarjetas: la home ya tiene cuatro y una más se leería
   como "otra lista". Esto se lee como una declaración, que es lo que es. */
.lv-def { max-width: 940px; margin: 0 auto; text-align: center; }
.lv-def__frase {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
  margin: 0;
  color: inherit;
}
.lv-def__fila {
  display: flex;
  gap: 0;
  margin-top: 46px;
  text-align: left;
}
.lv-def__col { flex: 1 1 0; padding: 0 26px; border-left: 1px solid rgba(243, 241, 240, .16); }
.lv-def__col:first-child { border-left: 0; padding-left: 0; }
.lv-def__col:last-child { padding-right: 0; }
.lv-bloque--claro .lv-def__col { border-left-color: rgba(16, 32, 63, .14); }
.lv-def__col h3 {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.lv-def__col p {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  color: rgba(243, 241, 240, .66);
}
.lv-bloque--claro .lv-def__col p { color: rgba(16, 32, 63, .66); }

@media (max-width: 860px) {
  .lv-def { text-align: left; }
  .lv-def__fila { display: block; margin-top: 30px; }
  .lv-def__col {
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(243, 241, 240, .16);
    margin-top: 18px;
  }
  .lv-def__col:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
  .lv-bloque--claro .lv-def__col { border-top-color: rgba(16, 32, 63, .14); }
}

/* ── Contraste ───────────────────────────────────────────────────────────────
   Dos columnas enfrentadas. La de la izquierda va apagada y la de la derecha
   destacada, para que la comparación se vea antes de leerse. */
.lv-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.lv-vs__col { padding: 30px 30px 28px; border-radius: 20px; }
.lv-vs__col--mal {
  background: rgba(243, 241, 240, .04);
  border: 1px solid rgba(243, 241, 240, .1);
  opacity: .72;
}
.lv-bloque--claro .lv-vs__col--mal {
  background: rgba(16, 32, 63, .035);
  border-color: rgba(16, 32, 63, .1);
}
.lv-vs__col--bien {
  background: linear-gradient(150deg, rgba(27, 170, 255, .16), rgba(27, 170, 255, .05));
  border: 1px solid rgba(27, 170, 255, .34);
}
.lv-vs__tit {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0 0 16px;
}
.lv-vs__lista { margin: 0; padding: 0; list-style: none; }
.lv-vs__lista li {
  position: relative;
  padding-left: 24px;
  margin-top: 11px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
}
.lv-vs__lista li:first-child { margin-top: 0; }
.lv-vs__col--mal .lv-vs__lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 11px;
  height: 1.5px;
  background: currentColor;
  opacity: .5;
}
.lv-vs__col--bien .lv-vs__lista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .28em;
  width: 6px;
  height: 11px;
  border: solid var(--lv-azul);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

@media (max-width: 860px) {
  .lv-vs { grid-template-columns: 1fr; gap: 14px; }
  .lv-vs__col { padding: 24px 22px 22px; }
}

/* ── Equipo ──────────────────────────────────────────────────────────────────
   Un grupo por área: a la izquierda qué hace esa parte del equipo, a la derecha
   quiénes son. Así la página explica el método y presenta a las personas en el
   mismo gesto, en vez de soltar una parrilla de caras sin contexto. */
.lv-equipo { display: flex; flex-direction: column; gap: 34px; }

.lv-eqgrupo {
  display: grid;
  grid-template-columns: minmax(210px, 270px) 1fr;
  gap: 30px;
  align-items: start;
  padding-top: 28px;
  border-top: 1px solid rgba(243, 241, 240, .12);
}
.lv-eqgrupo:first-child { padding-top: 0; border-top: 0; }
.lv-bloque--claro .lv-eqgrupo { border-top-color: rgba(16, 32, 63, .1); }

.lv-eqgrupo__tit {
  margin: 0 0 8px;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--lv-acento, #1baaff);
}
.lv-eqgrupo__txt {
  margin: 0;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(243, 241, 240, .66);
}
.lv-bloque--claro .lv-eqgrupo__txt { color: rgba(16, 32, 63, .68); }

.lv-eqgrupo__fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 22px 18px;
}

.lv-persona { display: flex; flex-direction: column; align-items: center; text-align: center; }

.lv-persona__foto {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 11px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lv-acento, #1baaff) 40%, transparent);
}
.lv-persona__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-persona__foto--iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lv-acento, #1baaff);
  background: color-mix(in srgb, var(--lv-acento, #1baaff) 16%, transparent);
}

.lv-persona__nombre {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.lv-persona__rol {
  margin-top: 3px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13px;
  color: rgba(243, 241, 240, .55);
}
.lv-bloque--claro .lv-persona__rol { color: rgba(16, 32, 63, .55); }
.lv-persona__nota {
  margin-top: 4px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(243, 241, 240, .4);
}
.lv-bloque--claro .lv-persona__nota { color: rgba(16, 32, 63, .42); }

@media (max-width: 860px) {
  .lv-eqgrupo { grid-template-columns: 1fr; gap: 18px; }
  .lv-eqgrupo__fila { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 18px 12px; }
  .lv-persona__foto { width: 72px; height: 72px; }
}

/* ── Áreas de salud (home) ───────────────────────────────────────────────────
   Tres tarjetas altas, cada una con el color de su área en el filo. El pie con
   la reserva se empuja al fondo para que los tres botones queden alineados. */
.lv-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.lv-area {
  --lv-acento: #1baaff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 26px 26px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
}
.lv-bloque--claro .lv-area {
  background: #fff;
  border-color: rgba(16, 32, 63, .1);
  box-shadow: 0 2px 14px rgba(16, 32, 63, .05);
}
.lv-area::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--lv-acento);
}
.lv-area__enc { display: flex; align-items: center; gap: 14px; }
.lv-area__icono {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--lv-acento) 15%, transparent);
  color: var(--lv-acento);
}
.lv-area__icono svg { width: 24px; height: 24px; display: block; }
.lv-area__eti {
  margin: 0 0 3px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lv-acento);
}
.lv-area__tit {
  margin: 0;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: inherit;
}
.lv-area__txt {
  margin: 0;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  line-height: 1.58;
  color: rgba(243, 241, 240, .74);
}
.lv-bloque--claro .lv-area__txt { color: rgba(16, 32, 63, .74); }

.lv-area__progs { display: flex; flex-direction: column; gap: 8px; }
.lv-area__prog {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 15px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--lv-acento) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--lv-acento) 20%, transparent);
  transition: background-color .16s ease, border-color .16s ease;
}
.lv-area__prog:hover { background: color-mix(in srgb, var(--lv-acento) 13%, transparent); }
.lv-area__prog > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-area__prog b {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}
.lv-area__prog i {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.35;
  opacity: .66;
}
.lv-area__prog svg { flex: none; width: 18px; height: 18px; color: var(--lv-acento); }

.lv-area__equipo-tit {
  margin: 0 0 8px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 600;
  opacity: .6;
}
.lv-area__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lv-area__chips span {
  padding: 7px 12px;
  border-radius: 999px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--lv-acento);
  background: color-mix(in srgb, var(--lv-acento) 11%, transparent);
}

.lv-area__dato,
.lv-area__graf {
  border-radius: 16px;
  background: linear-gradient(135deg, #052a6e, #0a3f8f);
  color: #fff;
}
.lv-area__dato {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.lv-area__cifra {
  flex: none;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: #7fd0ff;
  white-space: nowrap;
}
.lv-area__dato p {
  margin: 0;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .86);
}
.lv-area__graf { padding: 15px 18px 12px; }
.lv-area__graf-cab {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}
.lv-area__graf-cab b { color: #fff; font-weight: 600; }
.lv-area__curva { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.lv-area__curva-area { fill: color-mix(in srgb, var(--lv-acento) 24%, transparent); }
.lv-area__curva-linea {
  fill: none;
  stroke: var(--lv-acento);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.lv-area__curva-fin { fill: #fff; stroke: var(--lv-acento); stroke-width: 3; }
.lv-area__graf-nota {
  margin: 8px 0 0;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
}

.lv-area__pie { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.lv-area__btn {
  display: block;
  padding: 15px 20px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  background: #0c6fd1;
  color: #fff;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .16s ease, transform .16s ease;
}
.lv-area__btn:hover { background: #0a5fb3; transform: translateY(-1px); }
.lv-area__mas {
  text-align: center;
  text-decoration: none;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #0c6fd1;
}
.lv-bloque:not(.lv-bloque--claro) .lv-area__mas { color: #7fd0ff; }

@media (max-width: 1080px) {
  .lv-areas { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .lv-area { padding: 26px 20px 22px; }
  .lv-area__tit { font-size: 21px; }
  .lv-area__cifra { font-size: 28px; }
}

/* ── Método en marcha (home) ─────────────────────────────────────────────────
   Diagrama a la izquierda, revisión de caso a la derecha. Todo el diagrama se
   posiciona en porcentajes sobre un cuadrado, así escala igual en un móvil que
   en un monitor; las líneas van en un SVG de 520×520 debajo. */
/* ── Televisión, radio y pódcast (prensa) ────────────────────────────────── */
.lv-av__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
}
.lv-bloque--claro .lv-av__item {
  background: #fff;
  border-color: rgba(16, 32, 63, .1);
  box-shadow: 0 2px 14px rgba(16, 32, 63, .05);
}
.lv-av__cab {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
}
.lv-av__tipo {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0c6fd1;
  background: rgba(12, 111, 209, .1);
}
.lv-bloque:not(.lv-bloque--claro) .lv-av__tipo { color: #7fd0ff; background: rgba(127, 208, 255, .12); }
.lv-av__medio { font-size: 14px; font-weight: 600; opacity: .75; }
.lv-av__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #031c4c;
}
.lv-av__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-av__item audio { display: block; width: 100%; }
.lv-av__tit {
  margin: 0;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: inherit;
}
.lv-av__txt {
  margin: 0;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  opacity: .72;
}
.lv-av__mas {
  margin-top: auto;
  align-self: flex-start;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: #0c6fd1;
}
.lv-bloque:not(.lv-bloque--claro) .lv-av__mas { color: #7fd0ff; }

/* Artículos de pago: se avisa antes de que alguien pulse y se encuentre un muro. */
.lv-medio__pago {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 4px 9px;
  border-radius: 6px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #f3c26b;
  background: rgba(243, 194, 107, .14);
}
.lv-bloque--claro .lv-medio__pago { color: #8a5a00; background: rgba(214, 150, 20, .13); }

/* Portada con botón de reproducir, foto de la noticia o icono: las cuatro
   tarjetas del bloque llevan un marco 16:9 y se ven iguales. */
.lv-av__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #031c4c;
}
.lv-av__poster img,
.lv-av__marco > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.lv-av__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 28, 76, 0) 45%, rgba(3, 28, 76, .5));
}
.lv-av__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0c6fd1;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}
.lv-av__play svg { width: 28px; height: 28px; margin-left: 3px; }
.lv-av__poster:hover .lv-av__play,
.lv-av__poster:focus-visible .lv-av__play { transform: scale(1.08); }
.lv-av__poster:hover img { transform: scale(1.03); }
.lv-av__marco--icono {
  display: grid;
  place-items: center;
  color: #7fd0ff;
  background: radial-gradient(circle at 30% 22%, #1b5fc4, #031c4c 72%);
}
.lv-av__marco--icono svg { width: 72px; height: 72px; opacity: .92; }

/* ── Revista: páginas impresas como recortes ─────────────────────────────── */
.lv-rev {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  padding: 40px;
  border-radius: 26px;
  background: linear-gradient(135deg, #fdf0f4 0%, #f6f3f1 48%, #eaf3ff 100%);
  border: 1px solid rgba(16, 32, 63, .07);
}
.lv-rev__medio {
  margin: 0;
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #e0306a;
}
.lv-rev__fecha {
  margin: 8px 0 18px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(16, 32, 63, .5);
}
.lv-rev__intro {
  margin: 0 0 22px;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(16, 32, 63, .78);
}
.lv-rev__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lv-rev__lista li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(16, 32, 63, .08);
  box-shadow: 0 2px 10px rgba(16, 32, 63, .04);
}
.lv-rev__preg {
  font-family: "Poppins", "Poppins Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.38;
  color: #10203f;
  text-decoration: none;
  transition: color .16s ease;
}
.lv-rev__preg:hover { color: #0c6fd1; }
.lv-rev__pag {
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13px;
  color: rgba(16, 32, 63, .5);
}
.lv-rev__mesa { display: flex; justify-content: center; align-items: flex-start; gap: 26px; padding: 14px 0; }
.lv-rev__recorte {
  position: relative;
  flex: 0 1 46%;
  max-width: 270px;
  padding: 7px;
  background: #fff;
  transform: rotate(var(--giro, 0deg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 16px 36px rgba(16, 32, 63, .2);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.lv-rev__recorte:nth-child(2) { margin-top: 34px; }
.lv-rev__recorte img { display: block; width: 100%; height: auto; }
.lv-rev__recorte:hover,
.lv-rev__recorte:focus-visible {
  z-index: 1;
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 26px 50px rgba(16, 32, 63, .26);
}
.lv-rev__ver {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: "Outfit", "Outfit Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(16, 32, 63, .88);
  opacity: 0;
  transition: opacity .2s ease;
}
.lv-rev__recorte:hover .lv-rev__ver,
.lv-rev__recorte:focus-visible .lv-rev__ver { opacity: 1; }
@media (hover: none) { .lv-rev__ver { opacity: 1; } }
@media (max-width: 860px) {
  .lv-rev { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 26px 18px; }
  .lv-rev__medio { font-size: 36px; }
  .lv-rev__mesa { gap: 16px; }
  .lv-rev__recorte:nth-child(2) { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-rev__recorte, .lv-av__poster img, .lv-av__play { transition: none; }
}
