/* =========================================================
   Scene 4 — Dos contrataciones
   ========================================================= */

.scene--4 { --ink-dark: #1a1410; color: var(--ink-dark); }

.s4-strip { position: absolute; inset: 0; will-change: transform; }

/* =========================================================
   DOCS
   ========================================================= */
.s4-docs {
  position: absolute;
  left: 133px; top: 348px; width: 290px;
  pointer-events: none; z-index: 3;
}
.s4-docs img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.20));
}

/* =========================================================
   FLECHA 1
   ========================================================= */
.s4-arrow {
  position: absolute;
  left: 465px; top: 430px; width: 145px;
  pointer-events: none; z-index: 2;
  opacity: 0; transform: translateX(-270px);
  will-change: transform, opacity;
}
.s4-arrow img { display: block; width: 100%; height: auto; }
.s4-arrow.is-emerging { animation: s4ArrowEmerge 500ms cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes s4ArrowEmerge {
  from { opacity:0; transform:translateX(-270px); }
  to   { opacity:1; transform:translateX(0); }
}

/* =========================================================
   PÁGINAS APILADAS (hojas pequeñas)
   ========================================================= */
.s4-pages-wrap {
  position: absolute; left: 645px; top: 330px;
  pointer-events: none; z-index: 5;
}
.s4-page {
  position: absolute; width: 220px; height: 308px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 8px 28px rgba(0,0,0,.12);
  opacity: 0; will-change: transform, opacity;
}
.s4-pi { padding: 18px 16px; }
.s4-pi-hdr { width:100%; height:22px; background:#e0e0e0; border-radius:2px; margin-bottom:16px; }
.s4-pi-l   { height:7px; background:#d8d8d8; border-radius:2px; margin-bottom:11px; }
.s4-pi-gap { height:16px; }
.s4-pi-sub { width:52%; height:10px; background:#c8c8c8; border-radius:2px; margin-bottom:13px; }

.s4-page--p0 { top:0; left:0; z-index:10; transform:translateX(-220px) scale(0.35); }
.s4-page--p0.is-visible { animation: s4PageFirst 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes s4PageFirst {
  from { opacity:.05; transform:translateX(-220px) scale(0.35); }
  to   { opacity:1;   transform:translateX(0) scale(1); }
}
.s4-page--s1 { top:28px;  left:12px; z-index:11; transform:rotate(-2.5deg) translateY(-38px) scale(1.2); }
.s4-page--s2 { top:54px;  left:22px; z-index:12; transform:rotate(2.2deg)  translateY(-38px) scale(1.2); }
.s4-page--s3 { top:78px;  left:30px; z-index:13; transform:rotate(-1.5deg) translateY(-38px) scale(1.2); }
.s4-page--s4 { top:98px;  left:37px; z-index:14; transform:rotate(3.1deg)  translateY(-38px) scale(1.2); }
.s4-page--s5 { top:116px; left:43px; z-index:15; transform:rotate(-2.2deg) translateY(-38px) scale(1.2); }
.s4-page--s1.is-dropping { animation: s4Drop1 300ms ease-out forwards; }
.s4-page--s2.is-dropping { animation: s4Drop2 300ms ease-out forwards; }
.s4-page--s3.is-dropping { animation: s4Drop3 300ms ease-out forwards; }
.s4-page--s4.is-dropping { animation: s4Drop4 300ms ease-out forwards; }
.s4-page--s5.is-dropping { animation: s4Drop5 300ms ease-out forwards; }
@keyframes s4Drop1 { from{opacity:.1;transform:rotate(-2.5deg) translateY(-38px) scale(1.2);} to{opacity:1;transform:rotate(-2.5deg) translateY(0) scale(1);} }
@keyframes s4Drop2 { from{opacity:.1;transform:rotate(2.2deg)  translateY(-38px) scale(1.2);} to{opacity:1;transform:rotate(2.2deg)  translateY(0) scale(1);} }
@keyframes s4Drop3 { from{opacity:.1;transform:rotate(-1.5deg) translateY(-38px) scale(1.2);} to{opacity:1;transform:rotate(-1.5deg) translateY(0) scale(1);} }
@keyframes s4Drop4 { from{opacity:.1;transform:rotate(3.1deg)  translateY(-38px) scale(1.2);} to{opacity:1;transform:rotate(3.1deg)  translateY(0) scale(1);} }
@keyframes s4Drop5 { from{opacity:.1;transform:rotate(-2.2deg) translateY(-38px) scale(1.2);} to{opacity:1;transform:rotate(-2.2deg) translateY(0) scale(1);} }

/* =========================================================
   CONTADOR
   ========================================================= */
.s4-counter {
  position: absolute; left: 636px; top: 804px; width: 280px;
  text-align: center; pointer-events: none; z-index: 5;
  opacity: 0; transition: opacity 200ms ease;
}
.s4-counter.is-visible { opacity: 1; }
.s4-counter-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 110px; font-weight: 600; line-height: 1;
  color: #1a1410; letter-spacing: -5px;
}
.s4-counter-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: #6b7280; margin-top: 6px;
}

/* =========================================================
   FLECHA 2 — emerge de detrás de las hojas apiladas
   ========================================================= */
.s4-arrow2 {
  position: absolute; left: 950px; top: 427px; width: 145px;
  pointer-events: none; z-index: 4;
  opacity: 0; transform: translateX(-305px);
  will-change: transform, opacity;
}
.s4-arrow2 img { display: block; width: 100%; height: auto; }
.s4-arrow2.is-emerging { animation: s4Arrow2Emerge 500ms cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes s4Arrow2Emerge {
  from { opacity:0; transform:translateX(-305px); }
  to   { opacity:1; transform:translateX(0); }
}

/* =========================================================
   PÁGINA ÍCONO IMAGEN (emerge desde flecha 2)
   ========================================================= */
.s4-imgpage {
  position: absolute; left: 1130px; top: 330px;
  width: 220px; height: 308px; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18),
              0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0; transform: translateX(-218px) scale(0.35);
  will-change: transform, opacity; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.s4-imgpage.is-visible { animation: s4ImgPageIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes s4ImgPageIn {
  from { opacity:.05; transform:translateX(-218px) scale(0.35); }
  to   { opacity:1;   transform:translateX(0) scale(1); }
}
.s4-imgpage-icon { display: block; width: 110px; height: auto; }

/* =========================================================
   PDFs IMÁGENES — 3 hojas
   top: 20% = 216px  |  height = 70% = 756px  |  bottom: 10% = 108px
   transform-origin apunta al centro de .s4-imgpage
   imgpage center x = 1130+110 = 1240px, pdfwrap = 1385px
   1240 - 1385 = -145px (origin para pdf--1)
   ========================================================= */
.s4-pdf-wrap {
  position: absolute; left: 1385px; top: 216px;
  pointer-events: none; z-index: 8;
}
.s4-pdf {
  position: absolute; opacity: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.16), 0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  will-change: transform, opacity;
}
.s4-pdf img { display: block; height: 756px; width: auto; }

.s4-pdf--1 { top:0;   left:0;    z-index:1; transform-origin: -145px 50%; }
.s4-pdf--2 { top:10px; left:134px; z-index:2; transform-origin: -279px 50%; }
.s4-pdf--3 { top:5px;  left:268px; z-index:3; transform-origin: -413px 50%; }

.s4-pdf--1.is-entering { animation: s4Pdf1In 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-pdf--2.is-entering { animation: s4Pdf2In 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-pdf--3.is-entering { animation: s4Pdf3In 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }

@keyframes s4Pdf1In { from{opacity:.06;transform:rotate(0deg)    scale(.25);} to{opacity:1;transform:rotate(0deg)    scale(1);} }
@keyframes s4Pdf2In { from{opacity:.06;transform:rotate(-1.8deg) scale(.25);} to{opacity:1;transform:rotate(-1.8deg) scale(1);} }
@keyframes s4Pdf3In { from{opacity:.06;transform:rotate(1.2deg)  scale(.25);} to{opacity:1;transform:rotate(1.2deg)  scale(1);} }

/* =========================================================
   ARROWS GENÉRICAS (waves 3-6) — emergen translateX(-350px)
   ========================================================= */
.s4-arrowN {
  position: absolute; top: 427px; width: 145px;
  pointer-events: none; opacity: 0; transform: translateX(-350px);
  will-change: transform, opacity; z-index: 4;
}
.s4-arrowN img { display: block; width: 100%; height: auto; }
.s4-arrowN.is-emerging { animation: s4ArrowNEmerge 500ms cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes s4ArrowNEmerge {
  from { opacity:0; transform:translateX(-350px); }
  to   { opacity:1; transform:translateX(0); }
}

/* =========================================================
   ICOBOX GENÉRICA (waves 3-6) — emerge desde su flecha
   ========================================================= */
.s4-icobox {
  position: absolute; top: 330px; width: 220px; height: 308px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.18),
              0 20px 60px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0; transform: translateX(-218px) scale(0.35);
  will-change: transform, opacity; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.s4-icobox.is-visible { animation: s4IcoBoxIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes s4IcoBoxIn {
  from { opacity:.05; transform:translateX(-218px) scale(0.35); }
  to   { opacity:1;   transform:translateX(0) scale(1); }
}
.s4-icobox img { display: block; width: 110px; height: auto; }
.s4-icobox svg { display: block; }

/* =========================================================
   PDF WRAP 2 HOJAS (waves 3-6)
   top: 20% = 216px  |  PDF--b left: 85% de ~535px ≈ 455px
   transform-origin apunta al centro del icobox de su wave:
     PDF--a (left:0):    origen = -(255-110) = -145px
     PDF--b (left:455):  origen = -(255+455-110) = -600px
   ========================================================= */
.s4-pdfwrap2 {
  position: absolute; top: 216px;
  pointer-events: none; z-index: 8;
}
.s4-pdf2 {
  position: absolute; opacity: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.16), 0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  will-change: transform, opacity;
}
.s4-pdf2 img { display: block; height: 756px; width: auto; }

.s4-pdf2--a { top:0;    left:0;    z-index:1; transform-origin: -145px 50%; }
.s4-pdf2--b { top:14px; left:140px; z-index:2; transform-origin: -285px 50%; }
/* Planos (wave 6): segundo plano más a la derecha */
.s4-w6 .s4-pdf2--b { left: 455px; transform-origin: -600px 50%; }

/* Animaciones por wave (la rotación final va en el keyframe) */
.s4-w3 .s4-pdf2--a.is-entering { animation: s4W3AIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w3 .s4-pdf2--b.is-entering { animation: s4W3BIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w4 .s4-pdf2--a.is-entering { animation: s4W4AIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w4 .s4-pdf2--b.is-entering { animation: s4W4BIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w5 .s4-pdf2--a.is-entering { animation: s4W5AIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w5 .s4-pdf2--b.is-entering { animation: s4W5BIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w6 .s4-pdf2--a.is-entering { animation: s4W6AIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.s4-w6 .s4-pdf2--b.is-entering { animation: s4W6BIn 500ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }

@keyframes s4W3AIn { from{opacity:.06;transform:rotate(-0.5deg) scale(.25);} to{opacity:1;transform:rotate(-0.5deg) scale(1);} }
@keyframes s4W3BIn { from{opacity:.06;transform:rotate(2.0deg)  scale(.25);} to{opacity:1;transform:rotate(2.0deg)  scale(1);} }
@keyframes s4W4AIn { from{opacity:.06;transform:rotate(0.8deg)  scale(.25);} to{opacity:1;transform:rotate(0.8deg)  scale(1);} }
@keyframes s4W4BIn { from{opacity:.06;transform:rotate(-1.6deg) scale(.25);} to{opacity:1;transform:rotate(-1.6deg) scale(1);} }
@keyframes s4W5AIn { from{opacity:.06;transform:rotate(-1.2deg) scale(.25);} to{opacity:1;transform:rotate(-1.2deg) scale(1);} }
@keyframes s4W5BIn { from{opacity:.06;transform:rotate(1.8deg)  scale(.25);} to{opacity:1;transform:rotate(1.8deg)  scale(1);} }
@keyframes s4W6AIn { from{opacity:.06;transform:rotate(0.3deg)  scale(.25);} to{opacity:1;transform:rotate(0.3deg)  scale(1);} }
@keyframes s4W6BIn { from{opacity:.06;transform:rotate(-2.2deg) scale(.25);} to{opacity:1;transform:rotate(-2.2deg) scale(1);} }

/* =========================================================
   POSICIONES ABSOLUTAS EN EL STRIP
   Imgpdf right: 1385+268+535=2188. Arrow3: +80 gap.
   Tbl PDFs right: 2703+455+535=3693. Arrow4: +80 gap.
   Firma PDFs right: 4208+455+535=5198. Arrow5: +42 gap.
   Esq PDFs right: 5675+455+535=6665. Arrow6: +42 gap.
   ========================================================= */
/* TABLAS  — arrow 2268 | ico 2448 | pdfs 2703 */
#s4Arrow3  { left: 2268px; }
#s4TblPage { left: 2448px; }
#s4TblPdfs { left: 2703px; }

/* FIRMAS  — arrow 3458 | ico 3638 | pdfs 3893 */
#s4Arrow4    { left: 3458px; }
#s4FirmaPage { left: 3638px; }
#s4FirmaPdfs { left: 3893px; }

/* ESQUEMAS — arrow 4610 | ico 4790 | pdfs 5045 */
#s4Arrow5  { left: 4610px; }
#s4EsqPage { left: 4790px; }
#s4EsqPdfs { left: 5045px; }

/* PLANOS  — arrow 5762 | ico 5942 | pdfs 6197 */
#s4Arrow6   { left: 5762px; }
#s4PlanPage { left: 5942px; }
#s4PlanPdfs { left: 6197px; }