/* ════════════════════════════════════════════════════════════
   FUNCIONALIDADES EN VÍDEO — #features-demo
   Tres filas grandes, una por vídeo (carrito, bloques, secciones).
   Escritorio: tarjeta 50/50, vídeo alternando lado (izq., der., izq.).
   Móvil (≤900px): todo apilado dentro de la misma tarjeta.
   Base sin JS: todo visible, pastillas en bloque. El JS añade
   .is-armed (entrada), .is-looping (pastillas en bucle) e .is-inview.
   ════════════════════════════════════════════════════════════ */

.fd{
  --fd-card:#11151d;
  --fd-card-line:rgba(255,255,255,.08);
  --fd-card-line-hover:rgba(255,255,255,.16);
  --fd-card-inset:inset 0 -48px 64px -48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03);
  --fd-frame:#0b0e15;
  --fd-frame-line:rgba(255,255,255,.07);
  --fd-pill:rgba(255,255,255,.045);
  --fd-pill-line:rgba(255,255,255,.09);
  --fd-check-ink:#06101f;
  --fd-ease:cubic-bezier(.16,1,.3,1);
  padding-block:var(--section-pad);background:var(--bg);position:relative}
[data-theme="light"] .fd{
  --fd-card:#ffffff;
  --fd-card-line:#e3e6eb;
  --fd-card-line-hover:#cdd2da;
  --fd-card-inset:inset 0 -48px 64px -48px rgba(16,24,40,.06);
  --fd-frame:#f2f4f7;
  --fd-frame-line:#e3e6eb;
  --fd-pill:#f4f6f9;
  --fd-pill-line:#e3e6eb;
  --fd-check-ink:#ffffff}

.fd-container{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}

/* ── CABECERA ── */
.fd-head{max-width:760px;margin-bottom:clamp(48px,6vw,72px)}
.fd-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-sky);margin-bottom:18px}
.fd-title{color:var(--text-1);margin-bottom:16px}
.fd-title-accent{display:block}
.fd-sub{color:var(--text-2);max-width:60ch}

/* ── FILAS ── */
.fd-rows{display:flex;flex-direction:column;gap:clamp(24px,3vw,32px)}

.fd-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  gap:clamp(32px,4.5vw,64px);padding:clamp(16px,1.8vw,24px);
  border-radius:36px;background:var(--fd-card);border:1px solid var(--fd-card-line);
  box-shadow:var(--fd-card-inset);transition:border-color .35s var(--fd-ease)}
.fd-row:hover{border-color:var(--fd-card-line-hover)}

/* vídeo a la izquierda por defecto; la fila --flip lo pasa a la derecha */
.fd-frame{order:1}
.fd-copy{order:2;min-width:0;padding:clamp(8px,2vw,32px) clamp(8px,2.5vw,40px) clamp(8px,2vw,32px) 0}
.fd-row--flip .fd-frame{order:2}
.fd-row--flip .fd-copy{order:1;padding:clamp(8px,2vw,32px) 0 clamp(8px,2vw,32px) clamp(8px,2.5vw,40px)}

/* ── TEXTO ── */
.fd-heading{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.fd-icon{flex:none;width:48px;height:48px;border-radius:14px;background:var(--c-deep);color:#fff;
  display:flex;align-items:center;justify-content:center}
.fd-row-title{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--text-1);margin:0}
.fd-row-title .dh-text-accent{display:block}
.fd-row-text{font-size:15.5px;line-height:1.65;color:var(--text-2);max-width:46ch;margin:0 0 28px}

/* ── PASTILLAS ──
   Sin JS / movimiento reducido: en bloque, con salto de línea.
   Con JS: .is-looping duplica la lista y la desplaza en bucle. */
.fd-pills{display:flex;flex-direction:column;gap:10px}
.fd-marquee{min-width:0}
.fd-track{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fd-pill{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 9px;border-radius:999px;
  background:var(--fd-pill);border:1px solid var(--fd-pill-line);
  font-size:13.5px;font-weight:600;color:var(--text-1);white-space:nowrap}
.fd-check{flex:none;width:20px;height:20px;border-radius:50%;background:var(--c-sky);color:var(--fd-check-ink);
  display:flex;align-items:center;justify-content:center}

.fd-marquee.is-looping{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.fd-marquee.is-looping .fd-track{flex-wrap:nowrap;width:max-content;gap:0;
  animation:fd-marquee var(--fd-dur,36s) linear infinite;animation-play-state:paused}
/* cada copia lleva su hueco final para que el -50% case exacto */
.fd-marquee.is-looping .fd-pill{margin-right:10px}
.fd-marquee--rev.is-looping .fd-track{animation-direction:reverse}
.fd-row.is-inview .fd-marquee.is-looping .fd-track{animation-play-state:running}
@keyframes fd-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── VÍDEO ── */
.fd-frame{position:relative;margin:0;padding:12px;border-radius:22px;background:var(--fd-frame);border:1px solid var(--fd-frame-line)}
.fd-video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:12px;background:#0b0e15}

/* Botón reproducir/pausar (solo con movimiento reducido) */
.fd-play{position:absolute;right:24px;bottom:24px;z-index:2;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(8,12,22,.8);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.fd-play[hidden]{display:none}
.fd-play:hover{background:rgba(8,12,22,.94)}
.fd-play:focus-visible{outline:2px solid var(--c-sky);outline-offset:3px}

/* ── ENTRADA (una sola vez, escalonada) ──
   .is-armed lo pone el JS; sin JS nada se oculta. */
.fd-row.is-armed :is(.fd-heading,.fd-row-text,.fd-pills){opacity:0;transform:translateY(22px)}
.fd-row.is-armed .fd-frame{opacity:0;transform:translateY(36px) scale(.97)}
.fd-row.is-armed.is-shown :is(.fd-heading,.fd-row-text,.fd-pills,.fd-frame){opacity:1;transform:none;
  transition:opacity .9s var(--fd-ease),transform 1.1s var(--fd-ease)}
.fd-row.is-shown .fd-frame{transition-delay:0s}
.fd-row.is-shown .fd-heading{transition-delay:.12s}
.fd-row.is-shown .fd-row-text{transition-delay:.2s}
.fd-row.is-shown .fd-pills{transition-delay:.28s}

/* ════════════════════════════════
   MÓVIL Y TABLET: apilado dentro de la tarjeta
   ════════════════════════════════ */
@media(max-width:900px){
  .fd-row{grid-template-columns:minmax(0,1fr);gap:28px;padding:20px;border-radius:28px}
  .fd-copy,.fd-row--flip .fd-copy{order:1;padding:8px 4px 0}
  .fd-frame,.fd-row--flip .fd-frame{order:2}
  .fd-row-text{max-width:56ch}
}
@media(max-width:640px){
  .fd-row{padding:16px;border-radius:24px}
  .fd-heading{flex-direction:column;align-items:flex-start;gap:16px}
  .fd-icon{width:44px;height:44px;border-radius:12px}
  .fd-row-title{font-size:clamp(1.75rem,8vw,2.1rem)}
  .fd-row-text{font-size:15px;margin-bottom:24px}
  .fd-frame{padding:8px;border-radius:18px}
  .fd-play{right:18px;bottom:18px}
}

/* ════════════════════════════════
   PREFERS-REDUCED-MOTION
   ════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .fd-row,.fd-row :is(.fd-heading,.fd-row-text,.fd-pills,.fd-frame){transition:none!important}
  .fd-row.is-armed :is(.fd-heading,.fd-row-text,.fd-pills,.fd-frame){opacity:1;transform:none}
  .fd-marquee .fd-track{animation:none!important}
}