/* El oficio, explicado · corte 4 (3 nov). Reglas acotadas a #servicios.o4; va después de f2/oficio.css
   (que sigue dando la base de la sección .of y todo el visor de lecciones).
   El marco (tipografía, puertas, fondo, el hilo) es ónix, rosa y platino. Lo que explica, las portadas,
   lleva su color propio: mesa de luz ámbar y azul; estudio petróleo con tarjeta marfil y luz de lacre;
   relojes menta y azul con un sello de lacre; papel sepia con un hilo y tres cuentas.
   Sólo se animan transform y opacity. Sin JS o con movimiento reducido, cada portada queda en su estado final. */

#servicios.o4{
 --o4-papel:#ecdfc5;--o4-tinta-papel:#3a2d1f;
 --o4-ease:cubic-bezier(.2,.7,.2,1);
 padding-bottom:clamp(72px,10svh,120px)}
.o4 .o4-frente{position:relative;z-index:2;max-width:1180px;margin-inline:auto}

/* ——— Cabeza: rótulo, titular, una línea ——— */
.o4-cabeza{position:relative}
.o4-cabeza>.nudo{left:-12px;top:6px}
.o4 .o4-etq{color:var(--rosa-suave)}
.o4-titular{margin:16px 0 0;font:400 clamp(42px,11vw,96px)/1.02 var(--didona);letter-spacing:-.015em;color:var(--platino-claro);text-wrap:balance}
.o4-titular em{font-style:italic;color:var(--rosa-suave)}
.o4-sub{margin:16px 0 0;max-width:29ch;font:400 clamp(16px,4.3vw,19px)/1.45 var(--sans);color:rgb(243 242 245/.72);text-wrap:pretty}

/* ——— Las cuatro portadas ——— */
.o4-portadas{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:64px}
.o4-p{min-width:0}
.o4-carta{position:relative;display:flex;flex-direction:column;background:#121014;box-shadow:0 18px 44px rgb(0 0 0/.35)}

/* La portada: objeto a sangre, rótulo arriba, título y línea abajo (como las de «Esta es mi casa») */
.o4-tapa{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5.4;color:var(--platino-claro)}
.o4-arte{position:absolute;inset:0;z-index:-2;transition:transform 1.2s var(--o4-ease)}
.o4-tapa::after{content:"";position:absolute;inset:44% 0 0;z-index:-1;pointer-events:none;background:linear-gradient(rgb(var(--o4-sombra)/0),rgb(var(--o4-sombra)/.78) 46%,rgb(var(--o4-sombra)/.94))}
.o4-k{position:absolute;left:16px;right:72px;top:16px;margin:0;display:flex;align-items:baseline;gap:10px;font:600 10px/1.3 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--platino-claro)}
.o4-k b{font:italic 400 17px/1 var(--didona);letter-spacing:0;color:var(--rosa-suave)}
.o4-min{position:absolute;right:16px;top:14px;padding:4px 7px 3px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--platino-claro);background:rgb(11 10 12/.62)}
.o4-pie{position:absolute;left:16px;right:16px;bottom:18px}
.o4-t{margin:0;font:400 clamp(27px,7.6vw,36px)/1.02 var(--didona);letter-spacing:-.012em;color:var(--platino-claro);text-wrap:balance}
.o4-t em{display:block;font-style:italic;color:var(--rosa-suave)}
.o4-linea{margin:12px 0 0;padding-left:10px;max-width:34ch;border-left:2px solid var(--o4-acento);font:400 14.5px/1.42 var(--sans);color:rgb(243 242 245/.9);text-wrap:pretty}

/* La puerta y lo plegado: en el teléfono, en un solo renglón */
.o4-acciones{display:block}
.o4-abre{display:flex;align-items:center;gap:14px;width:calc(100% - 138px);min-height:54px;padding:0 12px 0 16px;box-sizing:border-box;white-space:nowrap;
 font:600 11px/1 var(--sans);font-stretch:112%;letter-spacing:.13em;text-transform:uppercase;color:var(--platino-claro);text-decoration:none;-webkit-tap-highlight-color:transparent}
.o4-abre::after{content:"";position:absolute;inset:0;z-index:1}
.o4-dur{display:none}
.o4-flecha{width:20px;height:20px;flex:none;fill:none;stroke:var(--rosa-suave);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--o4-ease)}
.o4-abre:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:-4px}
.o4-abre:focus-visible .o4-flecha,.o4-carta:active .o4-flecha{transform:translateX(4px)}
@media (hover:hover){
 .o4-carta:hover .o4-flecha{transform:translateX(4px)}
 .o4-carta:hover .o4-arte{transform:scale(1.03)}
}
.o4-carta:has(.o4-abre:focus-visible) .o4-arte{transform:scale(1.03)}

.o4-incluye{position:relative;z-index:2;margin-top:-54px;pointer-events:none}
.o4-incluye>*{pointer-events:auto}
.o4-incluye summary{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:138px;min-height:54px;margin-left:auto;padding:0 14px 0 12px;white-space:nowrap;box-sizing:border-box;list-style:none;cursor:pointer;
 font:600 10px/1 var(--sans);font-stretch:112%;letter-spacing:.12em;text-transform:uppercase;color:rgb(243 242 245/.7);border-left:1px solid rgb(243 242 245/.1);-webkit-tap-highlight-color:transparent}
.o4-incluye summary::-webkit-details-marker{display:none}
.o4-incluye summary::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--rosa-suave);border-bottom:1.5px solid var(--rosa-suave);transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--o4-ease)}
.o4-incluye[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.o4-incluye summary:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:-4px}
@media (hover:hover){.o4-incluye summary:hover{color:var(--platino-claro)}}
.o4-incluye ul{list-style:none;margin:0;padding:14px 16px 6px;display:grid;gap:10px;border-top:1px solid rgb(243 242 245/.08)}
.o4-incluye li{position:relative;padding-left:18px;font:400 14.5px/1.5 var(--sans);color:rgb(243 242 245/.76)}
.o4-incluye li::before{content:"";position:absolute;left:0;top:.74em;width:9px;height:1px;background:var(--o4-acento)}
.o4-incluye b{font-weight:600;color:var(--platino-claro)}
.o4-mira{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 16px 8px;font:600 10.5px/1 var(--sans);font-stretch:112%;letter-spacing:.16em;text-transform:uppercase;color:var(--rosa-suave);text-decoration:none}
.o4-mira:focus-visible{outline:2px solid var(--rosa-hilo);outline-offset:2px}

/* ════════ 01 · Mesa de luz: las piezas sueltas se ordenan (ámbar, azul, marfil) ════════ */
.o4-p1{--o4-sombra:9 14 30;--o4-acento:#f0b44c}
.o4-p1 .o4-arte{background:radial-gradient(90% 62% at 50% 34%,#22385f,#111c38 56%,#090e1e)}
.o4-mesa-esc{position:absolute;left:11%;right:13%;top:17%;height:42%;perspective:760px}
.o4-mesa{position:absolute;inset:0;border-radius:6px;transform:rotateX(46deg) rotateZ(-11deg);transform-style:preserve-3d;
 background:radial-gradient(110% 90% at 46% 42%,#fffaf0,#fde9c2 42%,#f2c06a 100%);
 box-shadow:0 0 0 7px #1e2944,0 0 0 8px #3b4a70,0 34px 46px rgb(0 0 0/.55),0 0 80px 6px rgb(240 180 76/.2)}
.o4-pz{--q:calc(1 - var(--p,1));position:absolute;display:block;border-radius:2px;box-shadow:0 2px 3px rgb(60 40 10/.28);
 transform:translate3d(calc(var(--dx) * var(--q)),calc(var(--dy) * var(--q)),0) rotate(calc(var(--dr) * var(--q)))}
.o4-video{left:6%;top:9%;width:31%;height:36%;background:linear-gradient(160deg,#28324a,#141b2c)}
.o4-video b{position:absolute;left:50%;top:50%;width:0;height:0;margin:-7px 0 0 -4px;border-left:12px solid #f0b44c;border-top:7px solid transparent;border-bottom:7px solid transparent}
.o4-nota{left:7%;top:56%;width:15%;height:30%;background:linear-gradient(170deg,#f6c25a,#e9a432)}
.o4-nota-b{left:25%}
.o4-azul{left:68%;width:26%;height:23%;background:linear-gradient(165deg,#3f77c6,#2a5598)}
.o4-azul::before{content:"";position:absolute;left:14%;right:34%;top:30%;height:2px;background:rgb(255 255 255/.75);box-shadow:0 6px 0 rgb(255 255 255/.45)}
.o4-az1{top:6%}.o4-az2{top:38%}.o4-az3{top:70%}
.o4-decide{left:42%;top:14%;width:21%;height:72%;background:linear-gradient(#fffdf7,#f6f1e6);box-shadow:0 10px 16px rgb(60 40 10/.32)}
.o4-decide::before{content:"";position:absolute;inset:0 0 auto;height:16%;background:#2a5598}
.o4-decide::after{content:"";position:absolute;left:16%;right:16%;top:32%;height:2px;background:#c9c2b4;box-shadow:0 9px 0 #c9c2b4,0 18px 0 #c9c2b4,0 27px 0 #ddd6c8}

/* ════════ 02 · Estudio: micrófono y tarjeta de pregunta (petróleo, marfil, lacre) ════════ */
.o4-p2{--o4-sombra:7 26 29;--o4-acento:#e0483a}
.o4-p2 .o4-arte{background:radial-gradient(80% 58% at 60% 30%,#1f565c,#0f3237 55%,#071a1d)}
.o4-foco{position:absolute;left:8%;width:60%;top:60%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgb(170 230 225/.18),rgb(170 230 225/0))}
.o4-mic{position:absolute;left:9%;top:9%;height:56%;width:auto;transform:rotate(-14deg);transform-origin:50% 90%;filter:drop-shadow(0 18px 18px rgb(0 0 0/.45))}
.o4-pregunta{--q:calc(1 - var(--p,1));position:absolute;right:8%;top:13%;width:47%;aspect-ratio:5/3.6;
 transform:translate3d(calc(46px * var(--q)),calc(-18px * var(--q)),0) rotate(calc(8deg + 16deg * var(--q)));opacity:calc(1 - var(--q) * .9)}
.o4-pregunta span{position:absolute;inset:0;display:grid;place-items:center;padding-top:10%;
 font:italic 400 clamp(40px,12vw,54px)/1 var(--didona);color:#1d2b33;
 background:linear-gradient(transparent 26%,#c8473b 26%,#c8473b calc(26% + 2px),transparent calc(26% + 2px)),
  repeating-linear-gradient(transparent 0 13px,rgb(40 80 110/.14) 13px 14px),linear-gradient(170deg,#f8f1e1,#ece1c8);
 box-shadow:0 22px 30px rgb(0 0 0/.42),0 2px 0 rgb(255 255 255/.5) inset;transform-origin:50% 0}

/* ════════ 03 · Taller: dos relojes que corren y un sello de lacre (menta, azul, lacre) ════════ */
.o4-p3{--o4-sombra:11 13 31;--o4-acento:#7fd6b4}
.o4-p3 .o4-arte{background:radial-gradient(80% 60% at 50% 32%,#272c55,#151935 58%,#0a0c1d)}
.o4-taller{position:absolute;left:6%;right:6%;top:9%;aspect-ratio:5/4}
.o4-cable{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M19 28Q24 62 42 67T78 41' fill='none' stroke='%23d9d7dc' stroke-opacity='.4' stroke-width='1.4' stroke-dasharray='3 4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.o4-reloj{--c:#7fd6b4;position:absolute;display:block;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 36% 30%,#2b315a,#121530 72%);
 box-shadow:inset 0 0 0 4px var(--c),inset 0 0 0 6px rgb(0 0 0/.35),inset 0 10px 18px rgb(255 255 255/.06),0 16px 26px rgb(0 0 0/.5)}
.o4-reloj::before{content:"";position:absolute;inset:12%;border-radius:50%;
 background:repeating-conic-gradient(var(--c) 0 2.4deg,transparent 2.4deg 30deg);
 -webkit-mask:radial-gradient(circle,transparent 78%,#000 79%);mask:radial-gradient(circle,transparent 78%,#000 79%);opacity:.8}
.o4-reloj::after{content:"";position:absolute;left:50%;top:50%;width:8%;aspect-ratio:1;border-radius:50%;background:#f3f2f5;transform:translate(-50%,-50%)}
.o4-r1{left:3%;top:8%;width:32%}
.o4-r2{--c:#7aa8f2;left:30%;top:52%;width:24%}
.o4-aguja-h,.o4-aguja-m{position:absolute;left:50%;bottom:50%;display:block;width:3px;margin-left:-1.5px;border-radius:2px;transform-origin:50% 100%}
.o4-aguja-h{height:24%;background:#f3f2f5;transform:rotate(var(--h,40deg))}
.o4-aguja-m{height:36%;background:var(--c);transform:rotate(var(--m,200deg))}
.o4-r2 .o4-aguja-h{--h:-70deg}.o4-r2 .o4-aguja-m{--m:110deg}
.o4-aguja-h{--g0:var(--h,40deg)}.o4-aguja-m{--g0:var(--m,200deg)}
.o4-sello{--q:calc(1 - var(--p,1));position:absolute;left:58%;top:16%;width:37%;aspect-ratio:1;display:grid;place-items:center;
 border-radius:48% 52% 45% 55%/54% 46% 54% 46%;
 background:radial-gradient(circle at 38% 30%,#e8695a,#b9332a 46%,#7c1811);
 box-shadow:0 14px 24px rgb(0 0 0/.5),inset 0 -7px 12px rgb(0 0 0/.28),inset 0 5px 9px rgb(255 200 185/.28);
 transform:translate3d(0,calc(-34px * var(--q)),0) scale(calc(1 + .45 * var(--q))) rotate(calc(-16deg * var(--q)));opacity:calc(1 - var(--q) * .85)}
.o4-sello i{display:grid;place-items:center;width:70%;aspect-ratio:1;border-radius:50%;
 box-shadow:inset 0 0 0 2px rgb(110 16 10/.55),0 1px 0 rgb(255 190 175/.3);
 font:italic 400 clamp(34px,10vw,46px)/1 var(--didona);color:#6e130d;text-shadow:0 1px 0 rgb(255 185 170/.4),0 -1px 0 rgb(60 6 4/.5)}

/* ════════ 04 · Papel sepia: un hilo con tres pausas (cuentas ámbar, petróleo y del color del hilo) ════════ */
.o4-p4{--o4-sombra:232 216 186;--o4-acento:#9e2f55}
.o4-p4 .o4-tapa{color:var(--onix)}
.o4-p4 .o4-arte{background:
 repeating-linear-gradient(94deg,rgb(120 90 50/.035) 0 1px,transparent 1px 7px),
 radial-gradient(95% 80% at 50% 36%,#f6eedd,#ebdcbf 62%,#d6c099)}
.o4-telar{position:absolute;left:0;right:0;top:25%;height:30%;transform:rotate(-9deg)}
.o4-hebra{position:absolute;left:-6%;right:-6%;top:50%;height:4px;margin-top:-2px;border-radius:2px;
 background:repeating-linear-gradient(115deg,rgb(255 255 255/.28) 0 2px,transparent 2px 6px),linear-gradient(#b8486d,#7f2346);
 box-shadow:0 5px 4px rgb(90 60 20/.22)}
.o4-cuenta{position:absolute;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
 box-shadow:0 8px 10px rgb(90 60 20/.3),inset 0 -4px 6px rgb(0 0 0/.22)}
.o4-c1{left:20%;background:radial-gradient(circle at 34% 30%,#f8d27e,#d8972a 55%,#9a6514)}
.o4-c2{left:50%;background:radial-gradient(circle at 34% 30%,#6fb8b8,#1f6f74 55%,#0e4246)}
.o4-c3{left:80%;background:radial-gradient(circle at 34% 30%,#e27c9c,#9e2f55 55%,#5e1530)}
.o4-aguja{position:absolute;left:0;top:50%;width:100%;height:0;opacity:0}
.o4-aguja::before{content:"";position:absolute;right:100%;top:-9px;width:52px;height:3px;border-radius:0 3px 3px 0;
 background:linear-gradient(90deg,#8f8b96,#f4f3f7 60%,#b7b3bf);box-shadow:0 3px 3px rgb(90 60 20/.3)}
.o4-aguja::after{content:"";position:absolute;right:calc(100% + 42px);top:-10px;width:6px;height:5px;border-radius:50%;box-shadow:0 0 0 1.2px #8f8b96}
.o4-p4 .o4-k,.o4-p4 .o4-t{color:var(--onix)}
.o4-p4 .o4-k b,.o4-p4 .o4-t em{color:var(--rosa-tinta)}
.o4-p4 .o4-linea{color:var(--o4-tinta-papel)}
.o4-p4 .o4-min{color:var(--onix);background:rgb(255 252 244/.7)}

/* ——— Con movimiento (.o4-vivo lo pone f4/servicios.js; .anda mientras la portada está a la vista) ——— */
@media (prefers-reduced-motion:no-preference){
 .o4-vivo .o4-cabeza>*:not(.nudo){opacity:0;transform:translateY(14px)}
 .o4-vivo .o4-cabeza.en>*:not(.nudo){opacity:1;transform:none;transition:opacity .6s var(--o4-ease),transform .7s var(--o4-ease)}
 .o4-vivo .o4-cabeza.en>.o4-titular{transition-delay:.08s}
 .o4-vivo .o4-cabeza.en>.o4-sub{transition-delay:.2s}
 .o4-vivo .o4-p{opacity:0;transform:translateY(26px)}
 .o4-vivo .o4-p.en{opacity:1;transform:none;transition:opacity .8s var(--o4-ease) var(--o4-d,0ms),transform .9s var(--o4-ease) var(--o4-d,0ms)}

 /* 02 · la luz de aire respira; la tarjeta se mece */
 .o4-vivo .o4-aire{animation:o4-respira 2.6s ease-in-out infinite}
 .o4-vivo .o4-pregunta span{animation:o4-mece 6s ease-in-out infinite}
 /* 03 · la máquina corre: dos relojes a su paso */
 .o4-vivo .o4-r1 .o4-aguja-m{animation:o4-gira 3.2s linear infinite}
 .o4-vivo .o4-r1 .o4-aguja-h{animation:o4-gira 38s linear infinite}
 .o4-vivo .o4-r2 .o4-aguja-m{animation:o4-gira 4.6s linear infinite reverse}
 .o4-vivo .o4-r2 .o4-aguja-h{animation:o4-gira 52s linear infinite}
 /* 04 · la aguja recorre el hilo y se detiene en cada pausa; la cuenta responde */
 .o4-vivo .o4-aguja{animation:o4-cose 9s var(--o4-ease) infinite}
 .o4-vivo .o4-cuenta{animation:o4-pausa 9s ease-out infinite}
 .o4-vivo .o4-c1{animation-delay:1.35s}.o4-vivo .o4-c2{animation-delay:3.6s}.o4-vivo .o4-c3{animation-delay:5.85s}
 /* Fuera de la pantalla, nada corre */
 .o4-vivo .o4-p:not(.anda) .o4-arte,.o4-vivo .o4-p:not(.anda) .o4-arte *{animation-play-state:paused}
}
@keyframes o4-respira{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes o4-mece{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-3deg) translateY(2px)}}
@keyframes o4-gira{from{transform:rotate(var(--g0,0deg))}to{transform:rotate(calc(var(--g0,0deg) + 360deg))}}
@keyframes o4-cose{
 0%{opacity:0;transform:translateX(-6%)}
 6%{opacity:1}
 15%,25%{transform:translateX(calc(20% - 20px))}
 40%,50%{transform:translateX(calc(50% - 20px))}
 65%,75%{transform:translateX(calc(80% - 20px))}
 86%{opacity:1}
 94%,100%{opacity:0;transform:translateX(112%)}
}
@keyframes o4-pausa{0%{transform:none}4%{transform:scale(1.2)}11%,100%{transform:none}}

/* ——— Computadora: cuatro portadas en fila; la línea aparece al acercarse ——— */
@media (min-width:900px){
 .o4-cabeza{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:48px;align-items:end}
 .o4 .o4-etq{grid-column:1/-1}
 .o4-titular{font-size:clamp(60px,6.4vw,96px)}
 .o4-sub{margin:0 0 .6em;font-size:19px}
 .o4-portadas{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px}
 .o4-p:nth-child(2){--o4-d:90ms}.o4-p:nth-child(3){--o4-d:180ms}.o4-p:nth-child(4){--o4-d:270ms}
 .o4-tapa{aspect-ratio:3/4.1}
 .o4-t{font-size:clamp(25px,2.1vw,31px)}
 .o4-linea{font-size:14px}
 .o4-cuenta{width:28px;height:28px;margin:-14px 0 0 -14px}
 .o4-pregunta span{font-size:clamp(34px,3.4vw,48px)}
 .o4-sello i{font-size:clamp(28px,2.8vw,40px)}
 .o4-abre{width:100%;padding-right:16px}
 .o4-abre>span:first-child{flex:1}
 .o4-abre{letter-spacing:.16em;font-size:11.5px}
 .o4-dur{display:inline;font:500 10px/1 var(--mono);letter-spacing:.06em;color:rgb(243 242 245/.6)}
 .o4-min{display:none}
 .o4-k{right:16px}
 .o4-incluye{margin-top:0}
 .o4-incluye summary{width:100%;justify-content:space-between;padding-left:16px;border-left:0;border-top:1px solid rgb(243 242 245/.08)}
}
@media (min-width:900px) and (hover:hover){
 .o4-pie{transform:translateY(76px);transition:transform .5s var(--o4-ease)}
 .o4-linea{height:62px;box-sizing:border-box;opacity:0;transition:opacity .4s var(--o4-ease)}
 .o4-carta:is(:hover,:focus-within) .o4-pie{transform:none}
 .o4-carta:is(:hover,:focus-within) .o4-linea{opacity:1;transition-delay:.08s}
 .o4-tapa::after{transition:opacity .5s var(--o4-ease);opacity:.75}
 .o4-carta:is(:hover,:focus-within) .o4-tapa::after{opacity:1}
}

@media (prefers-reduced-motion:reduce){
 .o4-arte,.o4-flecha,.o4-pie,.o4-linea,.o4-incluye summary::after{transition:none!important}
}