@charset "utf-8";
/* ==========================================================
   Vida · firma de movimiento «cose»
   Verbo: cose · Dirección: de arriba abajo, como la aguja por la costura
   Ritmo: a puntadas, 0,5 s con un leve rebote de tela, escalonado cada 80 ms
   Textura: puntada discontinua naranja y etiqueta de tela con ojal
   ========================================================== */
:root{
 --vida-dur:.5s;
 --vida-ease:cubic-bezier(.34,1.4,.64,1);
 --vida-ease-tela:cubic-bezier(.65,0,.25,1);
 --vida-dir:to bottom;
 --vida-paso:80ms;
 --vida-puntada:repeating-linear-gradient(90deg,var(--taronja) 0 14px,transparent 14px 22px);
}

/* ---------- Lámina provisional de los huecos nuevos ---------- */
.medio[data-vida]{background:var(--papel-2)}
.lamina{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:16px;text-align:center;color:var(--tinta-2);
 background:repeating-linear-gradient(135deg,transparent 0 18px,rgba(30,26,63,.04) 18px 36px),var(--papel-2);
 font:600 13px/1.3 var(--texto);z-index:0}
.lamina::before{content:"";position:absolute;inset:12px;border:2px dashed rgba(30,26,63,.22);border-radius:calc(var(--r) - 8px)}
.lamina b{font-family:var(--display);font-stretch:70%;font-size:16px;color:var(--tinta)}
.sec-tinta .medio[data-vida],.sec-tinta .lamina{background-color:rgba(255,244,228,.08)}
.sec-tinta .lamina{color:rgba(255,244,228,.7)}.sec-tinta .lamina b{color:var(--papel)}

/* ---------- «Cuelga y se cose»: la imagen baja desde su ojal con rebote de tela y una puntada la remata ---------- */
.cose{position:relative}
.cose>.medio{margin:0}
.cose>.medio{transform-origin:50% 0;opacity:0;transform:translateY(-34px) rotate(-2.4deg);transition:transform var(--vida-dur) var(--vida-ease) var(--vd,0ms),opacity calc(var(--vida-dur) * .6) ease var(--vd,0ms)}
.cose.cosido>.medio{opacity:1;transform:none}
.cose::before{content:"";position:absolute;left:50%;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--papel);box-shadow:inset 0 0 0 3px var(--tinta);z-index:4;opacity:0;transition:opacity .2s ease var(--vd,0ms)}
.cose.cosido::before{opacity:1}
.cose::after{content:"";position:absolute;left:18px;right:18px;top:34px;height:3px;background:var(--vida-puntada);z-index:4;transform:scaleX(0);transform-origin:left;transition:transform var(--vida-dur) var(--vida-ease-tela) calc(var(--vd,0ms) + var(--vida-dur))}
.cose.cosido::after{transform:scaleX(1)}
.equipo-mini .cose::before,.equipo-mini .cose::after{display:none}

/* ---------- Travelling vertical: la cámara baja despacio por la foto (solo mientras se ve) ---------- */
.respira>img.cargada,.respira>video.cargada{scale:1.06;animation:vida-baja-foto 16s ease-in-out infinite alternate;animation-play-state:paused}
.respira.vivo>img.cargada,.respira.vivo>video.cargada{animation-play-state:running}
@keyframes vida-baja-foto{from{translate:0 2.2%}to{translate:0 -2.2%}}

/* ---------- Pictogramas que se dibujan ---------- */
.simb.dibuja svg [stroke]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset calc(var(--vida-dur) * 1.6) var(--vida-ease-tela)}
.simb.dibuja svg text{opacity:0;transition:opacity var(--vida-dur) ease calc(var(--vida-dur) * 1.2)}
.simb.dibuja.trazado svg [stroke]{stroke-dashoffset:0}
.simb.dibuja.trazado svg text{opacity:1}

/* ---------- El hilo lateral de la 2.0 se retira en esta versión (lo usan ya otras demos del registro) ---------- */
.hilo-guia{display:none!important}

/* ---------- Capas que flotan ---------- */
[data-capa]{will-change:transform}
.chapa h4,.chapa .rol{position:relative;z-index:2}

/* ---------- Cabeceras ---------- */
.pcab-serv .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}
.pcab-serv .pcab-tag{justify-self:start;margin-top:26px;transform:rotate(-2deg)}
.cab-cine{align-self:center;transform:rotate(1.2deg)}
.cab-cine .medio{border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(30,26,63,.45)}
.urg-cab .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.urg-media{position:relative;min-width:0}
.urg-media .medio{border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(30,26,63,.5)}
.urg-media .pcab-tag{position:absolute;left:-28px;bottom:-34px;max-width:300px;z-index:4}
.pcab-arco .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center}
.arco-grande{max-width:560px;justify-self:end;width:100%}
.pcab-foto{padding-bottom:clamp(60px,7vw,110px)}
.pcab-fondo{position:absolute;right:0;top:0;width:min(64%,1000px);z-index:0}
.pcab-fondo .medio{border-radius:0 0 0 calc(var(--r) * 2)}
.pcab-fondo::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--papel) 0,rgba(255,244,228,.0) 34%)}
.pcab-foto .wrap{position:relative;z-index:3}
.pcab-foto .wrap>.rv{max-width:620px}
.pcab-foto .pcab-tag{margin-top:clamp(120px,14vw,220px)}
.cita-foto{align-self:center;justify-self:end;width:min(100%,420px);transform:rotate(2deg)}
.cita-foto .medio{border-radius:10px 10px var(--r) var(--r);clip-path:polygon(14% 0,86% 0,100% 10%,100% 100%,0 100%,0 10%)}

/* ---------- Fotos dentro de secciones ---------- */
.sec-head:has(.sec-lado){align-items:start}
.sec-lado{display:grid;gap:22px;min-width:0}
.sec-foto .medio{border-radius:var(--r)}
.sec-titfoto{display:flex;gap:22px;align-items:flex-end}
.sf-etq{flex:none;width:clamp(120px,13vw,190px)}
.sf-etq .medio{border-radius:8px 8px 18px 18px;clip-path:polygon(16% 0,84% 0,100% 12%,100% 100%,0 100%,0 12%)}
.tarjeta-foto{margin:-8px -8px 16px}
.tarjeta-foto .medio{border-radius:14px}
.tallas-pila{display:grid;width:100%;max-width:520px;place-items:center}
.tallas-pila>*{grid-area:1/1}
.tallas-fondo{width:100%}
.tallas-fondo .medio{border-radius:var(--r)}
.tallas-pila .tallas-etq{width:min(62%,320px);z-index:2;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.equipo-mini .medio{width:clamp(70px,8vw,110px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px var(--papel),0 0 0 5px var(--tinta)}
.equipo-mini .medio:nth-child(even){transform:translateY(24px)}

/* ---------- Entradas escalonadas con la firma (sustituye el fundido genérico) ---------- */
@media (prefers-reduced-motion:no-preference){
 .vida-js .rv{transition:opacity var(--vida-dur) ease calc(var(--d,0) * var(--vida-paso)),transform calc(var(--vida-dur) * 1.3) var(--vida-ease) calc(var(--d,0) * var(--vida-paso))}
 .vida-js .rv:not(.visto){transform:translateY(-22px)}
 .vida-js .rv-cose:not(.visto)>*{transform:translateY(-18px) rotate(-1.5deg)}
}

/* ---------- Confirmación: la etiqueta se cose ---------- */
.confirmacion{position:relative}
.cosido-ok{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);pointer-events:none;overflow:visible}
.cosido-ok rect{fill:none;stroke:var(--taronja);stroke-width:3;stroke-dasharray:12 9;stroke-linecap:round}
.cosido-ok .tapa{stroke:var(--papel);stroke-width:6;stroke-dasharray:var(--l) var(--l);stroke-dashoffset:0;animation:vida-coser 1.8s var(--vida-ease-tela) forwards}
@keyframes vida-coser{to{stroke-dashoffset:calc(var(--l) * -1)}}

@media (max-width:860px){
 .urg-cab .wrap,.pcab-arco .wrap{grid-template-columns:minmax(0,1fr)}
 .urg-media{margin-top:20px}
 .urg-media .pcab-tag{position:relative;left:auto;bottom:auto;margin:-40px 0 0 12px}
 .arco-grande{max-width:none;justify-self:stretch}
 .arco-grande .medio{aspect-ratio:3/4}
 .pcab-fondo{position:relative;width:100%;margin-top:calc(var(--cab) + 10px)}
 .pcab-fondo .medio{border-radius:0}
 .pcab-fondo::before{background:linear-gradient(0deg,var(--papel) 0,rgba(255,244,228,0) 30%)}
 .pcab-foto{padding-top:0}
 .pcab-foto .pcab-tag{margin-top:24px}
 .cita-foto{display:none}
 .pcab-serv .wrap{grid-template-columns:minmax(0,1fr)}
 .cab-cine{transform:none;margin-top:8px}
 .sec-titfoto{flex-direction:column;align-items:flex-start}
 .sf-etq{width:min(64%,260px)}
 .tallas-pila .tallas-etq{width:min(70%,260px)}
}
@media (prefers-reduced-motion:reduce){
 .cose>.medio{opacity:1!important;transform:none!important;transition:none}
 .cose::after{transform:scaleX(1)}
 .cose::before{opacity:1}
 .respira>img,.respira>video{animation:none!important;scale:1!important}
 .simb.dibuja svg [stroke]{stroke-dashoffset:0;transition:none}
 .simb.dibuja svg text{opacity:1}
 .cosido-ok .tapa{display:none}
 [data-capa]{transform:none!important}
}