/* ══════════════════════════════════════════════════════════════
   YENI INSPIRA — Mi Historia
   Depende de styles.css: tokens, header, footer, overlay, carrusel
   coverflow y .icono-marca vienen de ahí. Acá va sólo lo propio.
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1. HERO ─────────── */
.mh-hero {
  position: relative;
  padding: var(--s5) 0 var(--s6);
  overflow: hidden;
  isolation: isolate;
}
.mh-hero__glow {
  position: absolute; top: -170px; right: -150px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.28), rgba(151,110,220,0) 70%);
  filter: blur(75px); z-index: -2; pointer-events: none;
}
.mh-hero__titulo {
  font-size: clamp(1.95rem, 8.6vw, 2.2rem);
  line-height: 1.14;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin-top: var(--s1);
}

/* Cita destacada del hero — la frase personal larga */
.mh-hero__cita {
  margin-top: var(--s4);
  padding-left: var(--s3);
  border-left: 2px solid var(--violet-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--violet-deep);
}

/* ─────────── 2. FOTOS CON MARCO EDITORIAL ───────────
   Tarjeta blanca con leve rotación. La foto va en un recuadro con
   fondo lavanda porque los PNG recortados no tienen fondo propio. */
.foto-marco {
  margin: var(--s5) auto 0;
  width: min(78%, 300px);
  background: #fff;
  padding: 11px 11px 0;
  border-radius: 6px;
  box-shadow: var(--sombra-alta);
  transform: rotate(-2.5deg);
}
.foto-marco--der { transform: rotate(2.5deg); }
.foto-marco__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center top;
  background: linear-gradient(170deg, var(--lavender-mist), var(--lavender));
  border-radius: 3px;
  display: block;
}
.foto-marco__pie {
  font-family: var(--script);
  font-size: 1.12rem;
  color: var(--ink-soft);
  text-align: center;
  padding: .35rem 0 .6rem;
  line-height: 1.3;
}

/* Foto sin marco — flota sobre un halo lavanda */
.foto-suelta {
  position: relative;
  margin: var(--s5) auto 0;
  width: min(72%, 280px);
}
.foto-suelta::before {
  content: ""; position: absolute; inset: 8% -6% -2% -6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--lavender) 0%, rgba(237,230,247,0) 70%);
  z-index: -1;
}
.foto-suelta img { width: 100%; height: auto; }

/* ─────────── 3. CAPÍTULOS ─────────── */
.bloque { padding: var(--s6) 0; }
.bloque--tenue { background: var(--bg-tenue); border-block: 1px solid var(--line); }

/* Rótulo del bloque (LA HISTORIA / EL PROPÓSITO / LA VISIÓN) */
.bloque__rotulo {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 600; color: var(--violet-soft);
  margin-bottom: var(--s5);
}
.bloque__rotulo::before,
.bloque__rotulo::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.capitulo + .capitulo { margin-top: var(--s6); }

.capitulo__num {
  display: block;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
  margin-bottom: .55rem;
}
.capitulo__num::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px; background: var(--gold);
  vertical-align: middle; margin-right: .55rem;
}
.capitulo__titulo {
  font-size: 1.48rem;
  letter-spacing: -.02em;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.capitulo__texto {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.78;
}
.capitulo__texto + .capitulo__texto { margin-top: var(--s3); }

/* Cierre corto de capítulo — un escalón por debajo de la cita grande */
.capitulo__cierre {
  margin-top: var(--s3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--violet-deep);
}

/* Cita de cierre de capítulo — texto grande, centrado, acento violeta */
.cita {
  margin: var(--s5) auto 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--violet-deep);
  text-wrap: balance;
  position: relative;
  padding-top: var(--s4);
}
/* Comilla decorativa arriba, centrada */
.cita::before {
  content: "”";
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  font-size: 3.4rem; line-height: 1;
  color: var(--violet-soft); opacity: .38;
}
.cita--fuerte { font-size: 1.5rem; max-width: 24ch; }

/* ─────────── 4. "EL PUENTE" ───────────
   Momento visual propio: una línea a la vez, mucho aire. */
.puente {
  position: relative;
  margin-top: var(--s6);
  padding: var(--s5) var(--s3);
  text-align: center;
  background: linear-gradient(180deg, rgba(245,240,251,0), var(--lavender-mist) 22%, var(--lavender-mist) 78%, rgba(245,240,251,0));
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
}
.puente__pluma {
  position: absolute; top: -22px; right: -46px;
  width: 150px; opacity: .13; z-index: -1;
  transform: rotate(14deg);
  pointer-events: none;
}
.puente__entrada {
  font-family: var(--serif);
  font-size: 1.24rem; line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--s4);
  text-wrap: balance;
}
.puente__lineas { list-style: none; margin: 0; padding: 0; }
.puente__lineas li {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--violet-deep);
  padding: var(--s2) 0;
  text-wrap: balance;
  /* Estado inicial del reveal — sólo si el JS lo va a animar */
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.js-reveal .puente__lineas li:not(.is-visible) {
  opacity: 0;
  transform: translateY(14px);
}
.puente__lineas li + li { border-top: 1px solid rgba(183,156,224,.3); }

/* ─────────── 5. COMUNIDAD ─────────── */
.comunidad {
  position: relative;
  padding: var(--s7) 0 var(--s6);
  overflow: hidden;
  isolation: isolate;
  /* El link "Testimonios" del menú entra por #comunidad: sin este
     margen el header sticky tapa el título al aterrizar. */
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}
.comunidad__titulo {
  font-size: 2rem;
  text-align: center;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.comunidad__titulo em { font-style: normal; color: var(--violet); }
.comunidad__bajada {
  margin: var(--s2) auto var(--s5);
  max-width: 30ch;
  text-align: center;
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.6;
}

/* Tarjeta de comunidad — violeta sólido, réplica del boceto.
   El coverflow (transform/opacidad/z-index) lo aporta styles.css a
   través de .slide-video, así que la tarjeta comparte esa clase.
   Más ancha que el carrusel de video: acá hay texto para leer. */
.comunidad .carrusel { --slide-w: min(74vw, 300px); }
.slide-comunidad {
  display: flex; flex-direction: column;
  gap: var(--s3);
  text-align: left;
  padding: var(--s4) var(--s3) var(--s3);
  background: linear-gradient(158deg, #7B54C9 0%, #6C4AB6 55%, #5A3B9E 100%);
  color: #fff;
  font-family: var(--sans);
  border: none;
  min-height: 400px;
  cursor: pointer;
}
.slide-comunidad__cabeza {
  display: flex; align-items: center; gap: var(--s2);
}
.slide-comunidad__avatar {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--lavender);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.slide-comunidad__avatar img { width: 100%; height: 100%; object-fit: cover; }
.slide-comunidad__quien { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.slide-comunidad__nombre { font-size: .98rem; font-weight: 600; }
.slide-comunidad__rol { font-size: .8rem; color: rgba(255,255,255,.76); }
.slide-comunidad__comilla {
  margin-left: auto; align-self: flex-start;
  font-family: var(--serif); font-size: 3rem; line-height: .8;
  color: rgba(255,255,255,.3);
  pointer-events: none; user-select: none;
}
.slide-comunidad__cita {
  flex-grow: 1;
  font-size: 1.02rem;
  line-height: 1.58;
  color: rgba(255,255,255,.96);
}
.slide-comunidad__ver {
  display: flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 600;
  color: #fff;
  padding-top: var(--s2);
  border-top: 1px solid rgba(255,255,255,.28);
}
.slide-comunidad__ver .icon { width: 18px; height: 18px; }
/* Los laterales no responden al toque interno: el tap los trae al centro */
.slide-video:not(.es-centro) .slide-comunidad__ver { pointer-events: none; }

/* Instrucción de swipe */
.deslizar {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: var(--s3);
  font-size: .87rem; line-height: 1.4;
  color: var(--ink-soft); text-align: center;
}
.deslizar .icon { width: 30px; height: 30px; color: var(--violet); }

/* .invitacion vive en styles.css: la usan Home y Mi Historia */

/* ─────────── 7. CIERRE ─────────── */
.cierre {
  position: relative;
  padding: var(--s7) 0 var(--s8);
  background: var(--bg-tenue);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cierre__flores {
  position: absolute; bottom: -40px; left: -70px;
  width: 200px; opacity: .12; z-index: -1;
  transform: rotate(-14deg);
  pointer-events: none;
}
.cierre__manifiesto {
  font-family: var(--serif);
  font-size: 1.26rem;
  line-height: 1.58;
  color: var(--ink);
  max-width: 32ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cierre__manifiesto strong { color: var(--violet-deep); font-weight: 600; }
.cierre__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s5);
  min-height: 48px;
  padding: .8rem 1.4rem;
  font-family: var(--sans);
  font-size: 1rem; font-weight: 600;
  color: var(--violet-deep);
  background: none; border: none;
  border-bottom: 1.5px solid var(--violet-soft);
  border-radius: 0;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.cierre__cta .icon { transition: transform .25s ease; }
.cierre__cta:hover { border-color: var(--gold); }
.cierre__cta:hover .icon { transform: translateX(4px); }

/* ─────────── 8. ACCESIBILIDAD: menos movimiento ─────────── */
@media (prefers-reduced-motion: reduce) {
  .puente__lineas li { opacity: 1; transform: none; }
  .foto-marco, .foto-marco--der { transform: none; }
}


/* ─── Video de apertura ───
   Mismo marco violeta con filetes dorados que las páginas de servicio,
   replicado acá porque servicio.css no se carga en esta página. */
.mh-video {
  position: relative;
  margin: var(--s5) auto 0;
  width: min(88%, 340px);
  padding: 10px;
  background: linear-gradient(158deg, #F6F0FC, #EDE6F7);
  border: 1.5px solid var(--violet-soft);
  border-radius: calc(var(--r-lg) + 10px);
  box-shadow: var(--sombra-alta);
}
.mh-video::before, .mh-video::after {
  content: ""; position: absolute; top: 22%; bottom: 22%;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .55;
}
.mh-video::before { left: -10px; }
.mh-video::after  { right: -10px; }
.mh-video .sp-video__marco {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0f0d14;
  border: 2px solid var(--violet);
  box-shadow: 0 10px 26px rgba(30,18,55,.26);
}
.mh-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.mh-video .sp-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px);
  color: var(--violet);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(30,18,55,.34);
}
.mh-video .sp-video__play .icon { width: 25px; height: 25px; margin-left: 3px; fill: currentColor; }
.mh-video .sp-video__play[hidden] { display: none; }

/* ─────────── 6. VIDEOS DE COMUNIDAD ───────────
   Antes eran tres miniaturas en fila y se veían diminutas. Ahora usan
   el mismo carrusel circular del inicio (styles.css), con una piel más
   violeta para que se lea como otra sección. */
.com-videos {
  margin-top: var(--s6);
  padding: var(--s4) 0 var(--s3);
  background: linear-gradient(168deg, var(--lavender-mist), #F1E9FA);
  border: 1px solid var(--lavender);
  border-radius: var(--r-xl);
}
.com-videos__rotulo {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
  margin-bottom: var(--s3);
}
.com-videos__pie {
  margin-top: var(--s2);
  text-align: center;
  font-size: .85rem; line-height: 1.5;
  color: var(--ink-soft);
}

/* Piel violeta del carrusel de comunidad */
.com-videos .cc { --cc-w: min(56vw, 226px); }
.com-videos .cc__escenario { height: calc(24px + (var(--cc-w) - 16px) * 16 / 9); }
.com-videos .cc__tarjeta {
  padding: 8px;
  background: linear-gradient(158deg, #7B54C9 0%, #6C4AB6 60%, #5A3B9E 100%);
  border: none;
  box-shadow: 0 8px 22px rgba(45,25,90,.3);
}
.com-videos .cc__tarjeta.pos-frente { box-shadow: 0 14px 34px rgba(45,25,90,.42); }
.com-videos .cc__frame { border-radius: var(--r-md); }
.com-videos .cc__play {
  width: 50px; height: 50px;
  background: rgba(255,255,255,.95);
}
.com-videos .cc__play .icon { width: 21px; height: 21px; }
.com-videos .punto { background: var(--violet-soft); }
.com-videos .punto.es-activo { background: var(--violet-deep); }
.com-videos .cc__flecha { border-color: var(--lavender); }

/* Tira de fotos de los mismos encuentros, debajo de los videos.
   Se desplaza sola: la mitad de la tira es una copia exacta de la otra
   mitad, así al llegar al 50% el ciclo vuelve a empezar sin salto.
   La separación va como margen (y no como gap) justamente para que ese
   50% caiga en el lugar exacto. */
.momentos {
  margin-top: var(--s3);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.momentos__tira {
  display: flex; width: max-content;
  animation: momentos-desliza 18s linear infinite;
}
.momentos__foto {
  height: 152px; width: auto;
  margin-right: var(--s2);
  border-radius: var(--r-sm);
  object-fit: cover;
}
@keyframes momentos-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Sin movimiento automático: la tira queda quieta y se desliza a mano. */
@media (prefers-reduced-motion: reduce) {
  .momentos { overflow-x: auto; }
  .momentos__tira { animation: none; }
}