/* ══════════════════════════════════════════════════════════════
   YENI INSPIRA — Servicios (listado)
   Depende de styles.css: tokens, header, menú, footer, botones.
   ══════════════════════════════════════════════════════════════ */

/* ─────────── 1. HERO DE SECCIÓN ─────────── */
.sv-hero {
  position: relative;
  padding: var(--s5) 0 var(--s5);
  overflow: hidden;
  isolation: isolate;
}
.sv-hero__glow {
  position: absolute; top: -180px; right: -140px;
  width: 330px; height: 330px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151,110,220,.3), rgba(151,110,220,0) 70%);
  filter: blur(70px); z-index: -2; pointer-events: none;
}
/* Sin kicker: el título ya es la palabra "Servicios" y repetirla arriba
   sonaba a error. El filete dorado sostiene el mismo ritmo visual. */
.sv-hero__filete {
  width: 34px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: var(--s3);
}
.sv-hero__titulo {
  font-size: clamp(2.4rem, 12vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.sv-hero__bajada {
  margin-top: var(--s3);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.72;
}

/* Separador con estrella entre el hero y las tarjetas */
.sv-sep {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5);
}
.sv-sep::before, .sv-sep::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.sv-sep img { width: 26px; height: auto; opacity: .85; flex-shrink: 0; }

/* ─────────── 2. TARJETAS APILADAS ───────────
   Cada tarjeta se pega (sticky) un poco más abajo que la anterior y
   con z-index mayor, así al bajar la nueva se monta sobre la previa
   y queda asomando el borde superior de las que ya pasaron. */
.stack {
  list-style: none;
  margin: 0; padding: 0 0 var(--s6);
}
/* Por defecto las tarjetas van una debajo de otra, sin pegarse.
   Es el estado seguro: se ve la tarjeta entera y su botón siempre.
   El apilado se enciende más abajo, y sólo si la pantalla es lo
   bastante alta como para que entre. */
.stack__item {
  position: relative;
  padding-top: var(--s4);
}
.stack__item:first-child { padding-top: var(--s3); }

/* ─── El apilado, sólo si la tarjeta entra entera ───
   La tarjeta pegada tiene que mostrarse completa, con su botón: si el
   botón queda debajo del borde, el efecto parece trabado, que es lo
   que se veía en el celular de la clienta.
   Para que entre en la mayoría de los teléfonos, en pantallas de
   altura media la tarjeta se compacta un poco (foto más panorámica,
   menos aire abajo y escalones más chicos). Con eso baja de unos
   630px a unos 560px, y el efecto ya entra desde 640px de alto. */
@media (min-height: 640px) {
  .stack__item {
    position: sticky;
    padding-top: var(--s3);
  }
  /* El desfase crece 9px por tarjeta: es el borde que queda a la vista.
     Más que eso empuja el botón de las últimas tarjetas fuera de pantalla. */
  .stack__item:nth-child(1) { top: calc(var(--header-h) + 6px);  z-index: 1; }
  .stack__item:nth-child(2) { top: calc(var(--header-h) + 15px); z-index: 2; }
  .stack__item:nth-child(3) { top: calc(var(--header-h) + 24px); z-index: 3; }
  .stack__item:nth-child(4) { top: calc(var(--header-h) + 33px); z-index: 4; }
  .stack__item:nth-child(5) { top: calc(var(--header-h) + 42px); z-index: 5; }
  /* La última no necesita quedarse pegada: cierra la página */
  .stack__item:last-child { position: relative; top: auto; }
}

/* En pantallas de altura media, los escalones se achican: cada píxel
   que no se gasta arriba es un píxel que le queda al botón. */
@media (min-height: 640px) and (max-height: 819px) {
  .stack__item:nth-child(1) { top: calc(var(--header-h) + 4px); }
  .stack__item:nth-child(2) { top: calc(var(--header-h) + 10px); }
  .stack__item:nth-child(3) { top: calc(var(--header-h) + 16px); }
  .stack__item:nth-child(4) { top: calc(var(--header-h) + 22px); }
  .stack__item:nth-child(5) { top: calc(var(--header-h) + 28px); }
}

.carta {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}

/* Compacto a propósito: la tarjeta entera —incluido el botón— tiene que
   entrar en la pantalla de un celular. Cada píxel de alto acá es un
   píxel que aleja el CTA de la vista. */
.carta__cuerpo { padding: var(--s3) var(--s3) var(--s4); }

.carta__num {
  display: inline-block;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  color: var(--violet);
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 8px;
  padding: .2rem .55rem;
  margin-bottom: var(--s2);
}
.carta__titulo {
  font-size: 1.46rem;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}
/* La palabra clave del servicio, en violeta */
.carta__titulo em { font-style: normal; color: var(--violet); display: block; }

/* Filete dorado corto bajo el título */
.carta__filete {
  width: 42px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: var(--s2) 0;
  opacity: .75;
}

.carta__bajada {
  color: var(--ink-soft);
  font-size: .94rem;
  line-height: 1.6;
}

/* Fila del número + insignia de disponibilidad (Programa de 90 días).
   Comparten renglón para no sumar alto: el botón tiene que entrar en
   pantalla y esta es la tarjeta con más contenido. */
.carta__cabecera {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.carta__cabecera .carta__num { margin-bottom: 0; }

.carta__badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem;
  background: var(--lavender-mist);
  border: 1px solid var(--lavender);
  border-radius: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  color: var(--violet-deep);
}
.carta__badge .icon { width: 14px; height: 14px; color: var(--violet); }

/* Dato suelto con ícono (duración, modalidad) */
.carta__dato {
  display: flex; align-items: center; gap: .6rem;
  margin-top: var(--s3);
  font-size: .9rem; color: var(--ink-soft);
}
.carta__dato .icono-marca { --halo: #fff; }

.carta__cta {
  margin-top: var(--s3);
  width: 100%; max-width: none;
  min-height: 50px;
  padding: .85rem 1.4rem;
}

/* Banda más baja que un 4:3: la foto sigue leyéndose y la tarjeta
   entra completa en pantalla. */
.carta__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 20%;   /* encuadre en la cara */
  display: block;
  background: var(--lavender);
}
/* Recursos Gratuitos se encuadra en la mano, no en la cara */
.carta__img--mano { object-position: center center; }

/* ─────────── 3. CIERRE ─────────── */
.sv-cierre {
  position: relative;
  padding: var(--s6) 0 var(--s7);
  background: var(--bg-tenue);
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.sv-cierre__deco {
  position: absolute; bottom: -46px; left: -56px;
  width: 190px; opacity: .1; z-index: -1;
  transform: rotate(-12deg);
  pointer-events: none;
}
.sv-cierre__marca {
  width: 30px; height: auto;
  margin: 0 auto var(--s3);
  opacity: .9;
}
.sv-cierre__texto {
  font-family: var(--serif);
  font-size: 1.2rem; line-height: 1.55;
  color: var(--ink);
  max-width: 30ch; margin-inline: auto;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .stack__item { position: relative; top: auto; padding-top: var(--s4); }
}

/* La tarjeta compacta de las pantallas de altura media. Va al final
   a propósito: acá es donde le gana a la medida normal de la foto. */
@media (min-height: 640px) and (max-height: 819px) {
  .carta__img { aspect-ratio: 2 / 1; }
  .carta__cuerpo { padding-bottom: var(--s2); }
  .carta__bajada { font-size: .93rem; }
  .carta__titulo { font-size: 1.42rem; }
}