/* ====== Base + tokens (recoge variables inline del widget) ====== */
.aftl, .aftl * { box-sizing: border-box; }
.aftl { color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body .aftl { background: var(--bg); } /* no fuerza el body, sólo el contenedor */

.aftl .strip{ position:relative; background: linear-gradient(180deg, #1a1a1a, #101010);
  border:1px solid rgba(255,255,255,.08); border-left:0; border-right:0; box-shadow:0 28px 90px rgba(0,0,0,.5); z-index:1; }
.aftl .strip::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(110deg, rgba(255,255,255,.045) 0 1px, transparent 1px 6px),
              repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px);
  mix-blend-mode: screen; opacity:.28; animation:scratch 12s linear infinite;
}
@keyframes scratch{ 0%{transform:translateY(0)} 100%{transform:translateY(-120px)} }

/* ====== Film rails + sprockets RECTANGULARES ====== */
.aftl.film-timeline{ width:min(1100px,94vw); margin:0 auto 12vh; position:relative; padding:0 86px; }
.aftl.film-timeline::before,
.aftl.film-timeline::after{
  content:""; position:absolute; top:0; bottom:0; width:68px; z-index:0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), inset 12px 0 22px rgba(0,0,0,.45), inset -12px 0 22px rgba(0,0,0,.45);
  background:
    /* sombra interior del rectángulo (repetida vertical) */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.38) 0, rgba(0,0,0,.38) 2px,
      transparent 2px, transparent var(--sprocket-h),
      transparent var(--sprocket-h),
      transparent calc(var(--sprocket-h) + var(--sprocket-gap))
    ),
    /* cara clara del rectángulo */
    repeating-linear-gradient(
      to bottom,
      #f2f2f2 0, #e6e6e6 var(--sprocket-h),
      transparent var(--sprocket-h),
      transparent calc(var(--sprocket-h) + var(--sprocket-gap))
    ),
    linear-gradient(180deg, #0f0f0f, #191919);
  background-size:
    var(--sprocket-w) calc(var(--sprocket-h) + var(--sprocket-gap)),
    var(--sprocket-w) calc(var(--sprocket-h) + var(--sprocket-gap)),
    100% 100%;
  background-position:
    center var(--sprocket-offset),
    center var(--sprocket-offset),
    0 0;
  background-repeat: repeat-y, repeat-y, no-repeat;
}
.aftl.film-timeline::before{ left:0 }
.aftl.film-timeline::after{ right:0 }

/* ====== Frames ====== */
.aftl .frame{ position:relative; margin: var(--frame-gap) auto; width:min(860px,100%); border-radius:12px; overflow:clip;
  background:#0c0c0c; border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0; transform:translateY(12px); }
.aftl .frame.in{ opacity:1; transform:translateY(0); transition: opacity .6s ease, transform .6s ease; }
.aftl .frame::before, .aftl .frame::after{ content:""; position:absolute; left:0; right:0; height:28px; z-index:2;
  background:linear-gradient(180deg,#0d0d0d,#151515); box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);}
.aftl .frame::before{ top:0 } .aftl .frame::after{ bottom:0; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

.aftl .window{ position:relative; aspect-ratio:16/9; background:#111; overflow:hidden;
  background-image: radial-gradient(120% 100% at 50% 40%, rgba(255,255,255,.08), rgba(255,255,255,.02) 55%, transparent 70%);}
.aftl .window img, .aftl .window video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; filter:saturate(1.02) contrast(1.02); }
.aftl .window .badge{ position:absolute; left:14px; top:14px; z-index:3; background:rgba(0,0,0,.65); color:var(--text);
  border:1px solid rgba(255,255,255,.16); padding:6px 12px; border-radius:10px; font-weight:700; letter-spacing:.06em; }
.aftl .window .halo{ position:absolute; inset:-8%; pointer-events:none; z-index:1;
  background: radial-gradient(420px 240px at var(--mx,60%) var(--my,40%), rgba(224,139,164,.18), transparent 60%);
  filter:blur(18px) saturate(110%); mix-blend-mode:screen; transform: translateZ(0); }

.aftl .caption{ position:relative; padding:clamp(16px,2.2vw,24px); display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); }
@media (max-width:640px){ .aftl .caption{ grid-template-columns:56px 1fr } }

.aftl .icon-wrap{ width:64px;height:64px;border-radius:14px;display:grid;place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.aftl .icon{ width:64%;height:64%;stroke:currentColor;color:var(--coral) }
.aftl .icon *{ fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2 }

.aftl .eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--olive); }
.aftl .title{ margin:2px 0 6px 0; font:700 clamp(20px,3.2vw,32px)/1.08 "Playfair Display",serif }
.aftl .desc{ margin:0; color:var(--muted); font-size:clamp(14px,1.6vw,18px) }

.aftl .icon.sound .wave{ opacity:.9; transform-origin:50% 50%; animation: pulse .9s ease-in-out infinite; animation-play-state: paused; }
.aftl .frame.in .icon.sound .wave{ animation-play-state: running; }
@keyframes pulse{ 0%,100%{ transform:scaleX(.92) } 50%{ transform:scaleX(1) } }

.aftl .icon.people .merge{ transition: transform .25s ease }
.aftl .frame.in:hover .icon.people .merge{ transform:scale(1.06) }

.aftl .icon.cam .rec{ fill:var(--coral); opacity:0; transition:opacity .25s ease }
.aftl .frame.in:hover .icon.cam .rec{ opacity:.9 }

@media (prefers-reduced-motion: reduce){
  .aftl .frame, .aftl .frame.in, .aftl .icon.sound .wave, .aftl .strip::after{ transition:none !important; animation:none !important }
}
/* --- Asegurar capas correctas --- */
.aftl .strip{ position: relative; }
.aftl .strip::after{ z-index: 0; }     /* overlay por debajo */
.aftl .frame{ position: relative; z-index: 1; }

/* --- Visibles por defecto (fallback si JS falla) --- */
.aftl .frame{ opacity: 1; transform: none; }
.aftl.js-animate .frame{ opacity: 0; transform: translateY(12px); }
.aftl.js-animate .frame.in{ opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* --- Capas: que el overlay nunca tape el contenido --- */
.aftl .strip { position: relative; }
.aftl .strip::after { z-index: 0; }
.aftl .frame { position: relative; z-index: 1; }

/* --- Fallback visible y modo editor sin animaciones --- */
.aftl .frame { opacity: 1; transform: none; }
.aftl.js-animate .frame { opacity: 0; transform: translateY(12px); }
.aftl.js-animate .frame.in { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* En el editor de Elementor, mostrar todo siempre */
.elementor-editor-active .aftl .frame { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .aftl .window .halo { display: none; } /* menos ruido mientras editas */

/* ====== MOBILE LAYOUT: textos centrados debajo de la imagen ====== */
@media (max-width: 640px){

  /* Opcional: hacer los rieles un poco más angostos en móvil */
  .aftl.film-timeline{ padding: 0 62px; }
  .aftl.film-timeline::before,
  .aftl.film-timeline::after{ width: 52px; }

  /* El caption pasa a 1 columna: icono arriba, textos debajo, todo centrado */
  .aftl .caption{
    grid-template-columns: 1fr;          /* de 2 columnas -> 1 columna */
    grid-auto-rows: auto;
    justify-items: center;               /* centra los elementos del grid */
    text-align: center;                  /* centra el texto */
    row-gap: 10px;
    padding: 16px 14px 18px;             /* un poco más compacto */
  }

  .aftl .icon-wrap{
    width: 56px; height: 56px;
    border-radius: 12px;
    margin: 2px auto 6px;                /* centrado y con respiro */
  }

  /* Asegura el centrado del bloque de textos */
  .aftl .caption > div:last-child{ text-align: center; }

  /* Ajustes suaves de tamaños en móvil (puedes retocarlos en Elementor si quieres) */
  .aftl .title{ font-size: clamp(18px, 6vw, 26px); }
  .aftl .desc { font-size: clamp(13px, 4vw, 16px); }

  /* Badge un poco más pequeño en móvil */
  .aftl .window .badge{
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    left: 10px; top: 10px;
  }
}