/* ==========================================================
   Carpetas de servicios con contenido que asoma · 18/10/2026
   Cada carpeta lleva dentro una pieza real (temario, Radar SCT,
   portal de alumna, landing) que sale por el lado derecho.
   Copia previa: version-antes-carpetas-wow-2026-10-18/
   ========================================================== */

/* Apilado escalonado: cada carpeta se detiene un poco más abajo,
   así se ven las pestañas de las anteriores como en un archivador */
.service-folder:nth-child(1){top:105px}
.service-folder:nth-child(2){top:125px}
.service-folder:nth-child(3){top:145px}
.service-folder:nth-child(4){top:165px}
.work .grid .service-folder{margin-bottom:140px!important}
.work .grid .service-folder:last-child{margin-bottom:60px!important}

/* Papel: texto a la izquierda, pieza a la derecha */
.service-folder .folder-paper{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:16px 50px;align-items:start;position:relative}
.service-folder .folder-paper small{grid-column:1;grid-row:1}
.service-folder .folder-paper h3{grid-column:1;grid-row:2;margin:0}
.service-folder .folder-paper p{grid-column:1;grid-row:3;max-width:470px}
.service-folder .folder-actions{grid-column:1;grid-row:4;margin-top:6px}

/* La pieza que asoma */
.folder-peek{grid-column:2;grid-row:1/5;align-self:center;margin:0 -80px 0 0;position:relative;z-index:2;
  transform:translateX(-40px) rotate(0deg);opacity:.0;transition:transform .6s cubic-bezier(.23,1,.32,1),opacity .4s cubic-bezier(.23,1,.32,1)}
.service-folder.peek-open .folder-peek{transform:translateX(0) rotate(var(--peek-r,2.5deg));opacity:1}
.service-folder:nth-child(even) .folder-peek{--peek-r:-2deg}
.no-peek-motion .folder-peek{transform:rotate(var(--peek-r,2.5deg));opacity:1;transition:none}

/* Captura dentro de una ventana de navegador */
.peek-shot{background:#fafaf7;border-radius:12px;overflow:hidden;box-shadow:0 22px 45px #7d133a2e,0 2px 0 #7d133a14;border:1px solid #7d133a24}
.peek-bar{display:flex;gap:6px;align-items:center;padding:9px 12px;background:#f1ece4;border-bottom:1px solid #7d133a1a}
.peek-bar i{width:9px;height:9px;border-radius:50%;background:#7d133a33}
.peek-bar i:first-child{background:#7d133a}
.peek-bar span{margin-left:8px;font:700 10px/1 Raleway,sans-serif;letter-spacing:.6px;color:#7d133a99}
.peek-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.peek-shot figcaption{font:600 11px/1.4 Raleway,sans-serif;padding:9px 14px 11px;color:#191919}

/* Temario (formación): hoja de papel con pinza */
.peek-doc{background:#fffdf8;border-radius:6px;padding:34px 34px 30px;box-shadow:0 22px 45px #7d133a26;border:1px solid #7d133a1f;
  background-image:repeating-linear-gradient(#fffdf8 0 33px,#a7d4e455 33px 34px);background-position:0 70px}
.peek-doc:before{content:'';position:absolute;top:-14px;left:50%;width:78px;height:26px;margin-left:-39px;border-radius:6px;background:#7d133a;box-shadow:0 4px 0 #5a0d2a}
.peek-doc-tag{display:inline-block;font:800 10px/1.4 Raleway,sans-serif;letter-spacing:1.8px;text-transform:uppercase;background:#a7d4e4;color:#191919;padding:6px 11px;border-radius:30px}
.peek-doc ol{list-style:none;counter-reset:t;margin:18px 0 0;padding:0}
.peek-doc li{counter-increment:t;display:flex;gap:14px;align-items:baseline;padding:7px 0;font:500 15px/1.35 Raleway,sans-serif;color:#191919}
.peek-doc li:before{content:counter(t,decimal-leading-zero);font:400 22px/1 'DM Serif Display',serif;color:#7d133a;min-width:30px}
.peek-doc li b{font-weight:800;color:#7d133a}
.peek-doc-note{display:block;margin-top:14px;text-align:right;font:26px/1.1 'Indie Flower',cursive;color:#7d133a;transform:rotate(-3deg)}

/* Pantallas medianas: la pieza no sale tanto */
@media(max-width:1100px){.folder-peek{margin-right:-60px}}

/* Móvil: la pieza va debajo, recortada, sin salirse */
@media(max-width:800px){
  .service-folder:nth-child(1){top:60px}
  .service-folder:nth-child(2){top:74px}
  .service-folder:nth-child(3){top:88px}
  .service-folder:nth-child(4){top:102px}
  .work .grid .service-folder{margin-bottom:110px!important}
  .service-folder .folder-paper{grid-template-columns:1fr;gap:14px}
  .service-folder .folder-paper small,.service-folder .folder-paper h3,.service-folder .folder-paper p,.service-folder .folder-actions{grid-column:1;grid-row:auto}
  .folder-peek{grid-column:1;grid-row:auto;margin:6px -6px 0 0;max-width:520px}
  .peek-shot img{aspect-ratio:3/1}
  .peek-shot figcaption{display:none}
  .peek-bar{padding:7px 10px}
  .peek-doc{padding:22px 18px 14px;background-image:none}
  .peek-doc:before{top:-10px;width:60px;height:18px;margin-left:-30px}
  .peek-doc ol{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:12px}
  .peek-doc li{font-size:12px;padding:2px 0;gap:8px}
  .peek-doc li:before{font-size:16px;min-width:22px}
  .peek-doc-note{display:none}
}

@media(prefers-reduced-motion:reduce){
  .folder-peek{transform:rotate(var(--peek-r,2.5deg));opacity:1;transition:none}
}