/* ══════════════════════════════════════════════════════════════
   YENI INSPIRA — Páginas individuales de servicio
   Hoja compartida por Sesión de Claridad, Acompañamiento,
   Charlas/Talleres y Programa de 90 días.
   Depende de styles.css: tokens, header, menú, footer, botones.
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1. HERO ─────────── */
.sp-hero {
  position: relative;
  padding: var(--s5) 0 var(--s5);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #FBF8FE 0%, #F6F0FC 55%, var(--bg) 100%);
}
.sp-hero__glow {
  position: absolute; top: -150px; left: -130px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.26), rgba(151,110,220,0) 70%);
  filter: blur(65px); z-index: -2; pointer-events: none;
}
/* Elemento decorativo propio de cada servicio, arriba a la derecha */
.sp-hero__deco {
  position: absolute; top: 10px; right: -34px;
  width: 168px; height: auto;
  opacity: .5; z-index: -1;
  pointer-events: none;
}

/* Eyebrow "SERVICIO 01" con filetes dorados a los lados */
.sp-eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: .73rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
  margin-bottom: var(--s3);
}
.sp-eyebrow::before, .sp-eyebrow::after {
  content: ""; height: 1px; background: var(--gold); opacity: .6;
}
.sp-eyebrow::before { width: 26px; flex-shrink: 0; }
.sp-eyebrow::after  { flex: 1; }

.sp-hero__titulo {
  font-size: clamp(2.1rem, 10vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.sp-hero__titulo em { font-style: normal; color: var(--violet); display: block; }

/* Cuando el título arranca con una palabra muy larga, forzar el salto
   antes del <em> deja la preposición sola en su renglón
   ("Acompañamiento / de / Cuatro Semanas"). Con el em en línea el
   texto fluye y queda "Acompañamiento / de Cuatro Semanas". */
.sp-hero__titulo--fluido em { display: inline; }

/* Regla dorada con destello al centro */
.sp-destello {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s4) 0;
}
.sp-destello::before, .sp-destello::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .55;
}
.sp-destello span { color: var(--gold); font-size: 1rem; line-height: 1; }

/* Subtítulo entre comillas grandes.
   Ojo: esto NO puede ser flex. Con display:flex cada nodo de texto y
   cada <em> se vuelven ítems separados y la frase se reparte en
   columnas: se leía "Una conversación   más   un / puede   que
   negocio". El texto tiene que fluir como texto; la comilla va
   absoluta y el párrafo se corre para dejarle lugar. */
.sp-lema {
  position: relative;
  padding-left: 2.6rem;
  font-family: var(--serif);
  font-size: 1.2rem; line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.sp-lema::before {
  content: "“";
  position: absolute; left: 0; top: -.15em;
  font-family: var(--serif);
  font-size: 3.6rem; line-height: .82;
  color: var(--violet-soft); opacity: .45;
}
.sp-lema em { font-style: normal; color: var(--violet); font-weight: 600; }

/* ─────────── 2. PORTADA CON BARRA DE DATOS ─────────── */
.sp-portada {
  position: relative;
  margin: var(--s5) 0 0;
  padding-bottom: 34px;      /* espacio para que baje la barra */
}
.sp-portada__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  border-radius: var(--r-lg);
  border: 2px solid var(--lavender);
  box-shadow: var(--sombra-alta);
  background: var(--lavender);
}

/* Barra violeta oscura montada sobre el borde inferior de la foto */
.sp-datos {
  position: absolute; left: var(--s2); right: var(--s2); bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(140deg, #40276F 0%, #2E1B52 100%);
  border-radius: var(--r-md);
  box-shadow: 0 10px 26px rgba(30,18,55,.34);
  overflow: hidden;
}
.sp-dato {
  display: flex; flex-direction: column; align-items: center; gap: .32rem;
  padding: .7rem .3rem;
  text-align: center;
  color: #fff;
  font-size: .72rem; line-height: 1.28;
}
.sp-dato + .sp-dato { border-left: 1px solid rgba(255,255,255,.16); }
.sp-dato__ico {
  display: grid; place-items: center;
  width: 27px; height: 27px;
  border-radius: 50%;
  border: 1.4px solid var(--gold-light);
  color: var(--gold-light);
}
.sp-dato__ico .icon { width: 15px; height: 15px; }
.sp-dato strong { font-weight: 600; }

/* Variante en tarjeta clara (el recap antes del CTA) */
.sp-datos--claro {
  position: static;
  margin-top: var(--s5);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  box-shadow: none;
}
.sp-datos--claro .sp-dato { color: var(--ink); padding: var(--s3) .3rem; font-size: .76rem; }
.sp-datos--claro .sp-dato + .sp-dato { border-left-color: var(--lavender); }
.sp-datos--claro .sp-dato__ico { border-color: var(--violet-soft); color: var(--violet); }

/* ─────────── 3. INTRO + SECCIONES DE CONTENIDO ─────────── */
.sp-intro { padding: var(--s5) 0 0; }
.sp-intro p {
  font-size: 1.02rem; line-height: 1.76;
  color: var(--ink-soft);
}
.sp-intro strong { color: var(--violet-deep); font-weight: 600; }

.sp-bloque { padding: var(--s6) 0 0; }
.sp-bloque--tenue {
  margin-top: var(--s6);
  padding: var(--s6) 0;
  background: var(--bg-tenue);
  border-block: 1px solid var(--line);
}
.sp-bloque__titulo {
  font-size: 1.46rem;
  line-height: 1.2;
  letter-spacing: -.022em;
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.sp-bloque p {
  color: var(--ink-soft);
  font-size: 1rem; line-height: 1.78;
}
.sp-bloque p + p { margin-top: var(--s3); }

/* Aviso destacado (disponibilidad, lanzamiento) */
.sp-aviso {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: var(--s3);
  padding: .85rem 1rem;
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: var(--r-sm);
  font-size: .92rem; line-height: 1.55;
  color: var(--violet-deep); font-weight: 500;
}
.sp-aviso .icon { width: 18px; height: 18px; color: var(--violet); margin-top: 3px; }

/* Hero del Programa: más aire y un velo violeta más presente, para que
   se lea como el servicio premium del ecosistema. */
.sp-hero--premium {
  padding-top: var(--s6);
  background: linear-gradient(180deg, #F4EDFB 0%, #EFE5F9 48%, var(--bg) 100%);
}
.sp-hero--premium .sp-hero__titulo { font-size: clamp(2.2rem, 10.5vw, 2.8rem); }

/* Frase suelta con peso — cierra un bloque */
.sp-remate {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.16rem; line-height: 1.5;
  color: var(--violet-deep);
  margin-top: var(--s3);
  text-wrap: balance;
}

/* Atribución al pie del remate */
.sp-bloque p.sp-remate__firma {
  margin-top: var(--s1);
  font-size: .86rem; letter-spacing: .04em;
  color: var(--violet);
}

/* Listas con viñeta de marca */
.sp-lista {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s2);
}
.sp-lista li {
  position: relative;
  padding-left: var(--s4);
  color: var(--ink-soft);
  font-size: .99rem; line-height: 1.62;
}
.sp-lista li::before {
  content: ""; position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 3px var(--lavender);
}
/* Variante "incluye": check dorado */
.sp-lista--incluye li::before {
  width: 8px; height: 8px;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(168,128,31,.16);
}

/* Dato de inversión suelto */
.sp-inversion {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: var(--r-lg);
}
.sp-inversion .icono-marca { --halo: var(--lavender-mist); }
.sp-inversion__txt { display: flex; flex-direction: column; line-height: 1.35; }
.sp-inversion__rot {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--violet);
}
.sp-inversion__val { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); }

/* ─────────── 4. PLACEHOLDER DE VIDEO (Acompañamiento) ───────────
   No hay video todavía: mostramos la portada del servicio atenuada
   con un rótulo claro, para que se lea como "acá va a haber un video"
   y no como un hueco roto. */
.sp-video-pronto {
  position: relative;
  margin-top: var(--s5);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
  background: #221540;
  aspect-ratio: 16 / 10;
}
.sp-video-pronto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  opacity: .42;
  filter: saturate(.75);
}
.sp-video-pronto__capa {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem;
  text-align: center;
  padding: var(--s3);
  background: linear-gradient(180deg, rgba(28,16,54,.28), rgba(28,16,54,.62));
  color: #fff;
}
.sp-video-pronto__play {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,.62);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  color: #fff;
}
.sp-video-pronto__play .icon { width: 25px; height: 25px; margin-left: 3px; fill: currentColor; }
.sp-video-pronto__rot {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-light);
}
.sp-video-pronto__txt { font-size: .92rem; line-height: 1.45; color: rgba(255,255,255,.9); max-width: 26ch; }

/* ─────────── 5. GALERÍA DE VIDEOS (Charlas y Talleres) ─────────── */
.sp-galeria { margin-top: var(--s5); }
.sp-galeria__pista {
  display: flex; gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: var(--s3);
  padding-block: 4px var(--s3);
}
.sp-galeria__pista::-webkit-scrollbar { display: none; }
/* Cada momento va montado como una foto: marco blanco, leve rotación
   alterna y un pie con el número. Antes eran videos sueltos con los
   controles del navegador y se veían pegados y sin identidad. */
.sp-galeria__item {
  flex: 0 0 auto;
  width: min(66vw, 250px);
  margin: 0;
  scroll-snap-align: center;
  padding: 9px 9px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.sp-galeria__item:nth-child(odd)  { transform: rotate(-1.1deg); }
.sp-galeria__item:nth-child(even) { transform: rotate(1.1deg); }
.sp-galeria__item:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--sombra-alta); }

.sp-galeria__marco {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0f0d14;
}
.sp-galeria__item video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }

/* Mismo botón violeta que el carrusel del inicio, para que se lean
   como el mismo sitio. */
.sp-galeria__play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  color: var(--violet);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30,18,55,.3);
  transition: transform .25s ease, background .2s ease;
}
.sp-galeria__play .icon { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.sp-galeria__play:hover { background: #fff; transform: scale(1.06); }
.sp-galeria__play[hidden] { display: none; }

.sp-galeria__pie {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .2rem .7rem;
}
.sp-galeria__num {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  color: var(--violet);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 7px;
  padding: .12rem .4rem;
  flex-shrink: 0;
}
.sp-galeria__txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sp-galeria__txt strong { font-size: .86rem; font-weight: 600; color: var(--ink); }
.sp-galeria__txt em { font-style: normal; font-size: .76rem; color: var(--ink-soft); }

/* ─────────── 6. CTA FINAL ─────────── */
.sp-cta {
  position: relative;
  margin-top: var(--s6);
  padding: var(--s6) 0 var(--s7);
  background: var(--bg-tenue);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.sp-cta__deco {
  position: absolute; bottom: -40px; right: -50px;
  width: 175px; opacity: .12; z-index: -1;
  transform: rotate(9deg);
  pointer-events: none;
}
.sp-cta__titulo {
  font-size: 1.5rem;
  line-height: 1.22;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin-bottom: var(--s3);
}
.sp-cta p {
  color: var(--ink-soft);
  font-size: 1rem; line-height: 1.76;
}
.sp-cta p + p { margin-top: var(--s3); }
.sp-cta .btn--primario { margin-top: var(--s5); }
.sp-cta__acciones { display: flex; flex-direction: column; align-items: center; }

/* Nota al pie del CTA — aclara que el destino todavía no existe */
.sp-nota {
  margin-top: var(--s3);
  font-size: .8rem; color: var(--ink-soft);
  text-align: center;
}

/* ─────────── 7. VOLVER A SERVICIOS ─────────── */
.sp-volver {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--s5);
  font-size: .88rem; font-weight: 600;
  color: var(--violet);
  text-decoration: none;
}
.sp-volver .icon { transition: transform .25s ease; }
.sp-volver:hover .icon { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .sp-galeria__pista { scroll-behavior: auto; }
  .sp-galeria__item, .sp-galeria__item:nth-child(odd), .sp-galeria__item:nth-child(even) { transform: none; }
}



@media (min-width: 768px) {
  .sp-bloque p, .sp-lista li { font-size: 1.06rem; }
  .sp-eyebrow { font-size: .84rem; }
  .sp-dato { font-size: .8rem; }
}

/* ─── Marco de video vertical ───
   El video solo, apoyado sin nada alrededor, quedaba tirado en la
   página. Le damos un marco violeta y dos filetes dorados a los
   costados, en la misma línea del resto de la marca. */
.sp-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);
  isolation: isolate;
}
/* Filetes dorados a los lados, como los del kicker */
.sp-video::before, .sp-video::after {
  content: ""; position: absolute; top: 22%; bottom: 22%;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .55;
}
.sp-video::before { left: -10px; }
.sp-video::after  { right: -10px; }

.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);
}
.sp-video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.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);
  transition: transform .25s ease, background .2s ease;
}
.sp-video__play .icon { width: 25px; height: 25px; margin-left: 3px; fill: currentColor; }
.sp-video__play:hover { background: #fff; transform: scale(1.06); }
.sp-video__play[hidden] { display: none; }