/* Páginas interiores de V12 (servicios, estudio, trabajo). Base: ../v10/v10.css. No toca la portada. */

/* Menú: la página en la que estás, marcada */
.nav-links a.on{opacity:1;box-shadow:inset 0 -1px 0 currentColor;padding-bottom:3px}
.menu a.on{color:var(--ink-3)}

/* Cabecera de cada página */
.ph{padding:calc(var(--navh) + clamp(48px,7vw,110px)) var(--pad) 0}
.ph>*{padding:0 var(--cp)}
.ph-crumbs a{color:var(--ink-2)}
.ph-crumbs a:hover{color:var(--ink)}
.ph-t{font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.8;font-size:var(--phs,14.6vw);white-space:nowrap;margin:clamp(18px,2vw,30px) 0 clamp(26px,3vw,44px);margin-left:-.04em}
.ph-t .ln>span{transform:translateY(105%)}
.ph.in .ph-t .ln>span{transform:none}
.ph-lead{font-size:clamp(18px,1.7vw,26px);line-height:1.3;color:var(--ink-2);max-width:40ch;padding-bottom:clamp(20px,3vw,40px)}
.ph-lead b{color:var(--ink);font-weight:600}

/* ===== SERVICIOS ===== */
/* Qué hacemos: lista fina (K95) y un solo vídeo a la izquierda que cambia según el servicio (Foudre) */
.svx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);margin:0 var(--pad);padding:0 var(--cp)}
.svx-media{position:sticky;top:calc(var(--navh) + 4vh);height:calc(100vh - var(--navh) - 8vh);align-self:start;display:flex;align-items:center;justify-content:center}
.svx-frame{position:relative;height:100%;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:#111}
.svx-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.svx-frame video.on{opacity:1;transform:none}
.svx-tag{position:absolute;left:var(--cp);top:var(--cp);z-index:2;color:var(--ink);background:rgba(7,7,7,.55);padding:6px 10px}
.svx-list{min-width:0}
.srow{min-height:76vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);padding:clamp(30px,4vw,60px) 0;transition:opacity .5s var(--ease)}
.srow:last-child{border-bottom:1px solid var(--line)}
.svx-list.live .srow:not(.act){opacity:.32}
.srow-h{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:default;padding:0}
.srow-h .label{display:block}
.srow h3{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:clamp(40px,5.2vw,96px);margin:10px 0 26px}
.srow li{font-size:clamp(16px,1.3vw,20px);color:var(--ink-2);padding:10px 0;border-top:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.srow li::before{content:"";flex:none;width:6px;height:6px;background:var(--ink-3);transform:translateY(-3px)}
.plus{display:none}
.srow-vid{display:none}
.svx-after{margin-top:0}

/* Cómo empezamos: cartas grandes numeradas que se apilan al bajar (Foudre) */
.pcards{margin:0 var(--pad);padding:0 var(--cp)}
.pcard{position:sticky;top:calc(var(--navh) + 22px + var(--i) * 24px);min-height:min(60vh,540px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(20px,3vw,60px);align-items:end;padding:clamp(24px,3vw,52px);margin-bottom:9vh;background:var(--cb);color:var(--ci);box-shadow:0 -20px 60px rgba(0,0,0,.35)}
.pcard:last-child{margin-bottom:0}
.pcard .label{color:inherit;opacity:.62}
.pc-num{font-weight:900;letter-spacing:-.07em;line-height:.78;font-size:clamp(130px,17vw,300px);align-self:start}
.pc-body b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:clamp(40px,5.4vw,100px);margin:12px 0 18px}
.pc-body p{font-size:clamp(17px,1.5vw,24px);line-height:1.3;max-width:28ch;opacity:.85}
.pcard.c1{--cb:var(--ink);--ci:#0a0a0a}
.pcard.c2{--cb:#E3241B;--ci:#f6efe6}
.pcard.c3{--cb:#1a1a1a;--ci:var(--ink);box-shadow:0 -20px 60px rgba(0,0,0,.35),inset 0 0 0 1px var(--line)}
.pcard.c4{--cb:#d9d1c1;--ci:#0a0a0a}

/* Preguntas frecuentes: rayas finas y un "+" (K95) */
.faqx{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,4vw,80px);margin:0 var(--pad);padding:clamp(40px,5vw,80px) var(--cp) 0}
.faqx-t{align-self:start;position:sticky;top:calc(var(--navh) + 30px)}
.faqx-t .lead{margin-top:20px}
.faqx details{border-top:1px solid var(--line)}
.faqx details:last-child{border-bottom:1px solid var(--line)}
.faqx summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(20px,2vw,34px);transition:color .25s}
.faqx summary::-webkit-details-marker{display:none}
.faqx summary:hover{color:var(--ink-2)}
.faqx summary::after,.plus{content:"";flex:none;width:22px;height:22px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .45s var(--ease)}
.faqx details[open] summary::after{transform:rotate(45deg)}
.faqx details p{color:var(--ink-2);font-size:clamp(16px,1.3vw,20px);max-width:56ch;padding:0 0 26px}

/* ===== ESTUDIO ===== */
/* La frase con una parte rodeada a mano y objetos de los clientes debajo (Damn Good) */
.manif.mx{height:240vh}
.mx .manif-stick{gap:clamp(18px,2.6vh,34px);padding-top:var(--navh)}
.mx .manif-txt{font-size:clamp(36px,5.3vw,98px);max-width:19ch}
.circ{position:relative;display:inline-block;white-space:nowrap}
.circ svg{position:absolute;left:-7%;top:-16%;width:114%;height:134%;overflow:visible;pointer-events:none}
.circ path{fill:none;stroke:#E3241B;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease)}
.circ.drawn path{stroke-dashoffset:0}
.mx-objs{display:flex;align-items:flex-end;gap:clamp(18px,3vw,56px);height:clamp(70px,13vh,140px)}
.mx-objs img{height:100%;width:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));opacity:0;transform:translateY(30px) rotate(var(--r));transition:opacity .8s var(--ease),transform 1s var(--ease);animation:flota2 6s ease-in-out infinite alternate}
.mx-objs img:nth-child(2n){animation-duration:7.4s;animation-delay:-2s}
.mx-objs img:nth-child(3n){animation-duration:5.4s;animation-delay:-1s}
.mx-objs.on img{opacity:1;transform:rotate(var(--r))}
.mx-objs.on img:nth-child(2){transition-delay:.1s}
.mx-objs.on img:nth-child(3){transition-delay:.2s}
.mx-objs.on img:nth-child(4){transition-delay:.3s}
@keyframes flota2{to{translate:0 -10px}}
.studio-x{margin-top:clamp(24px,3vw,40px)}

/* ===== TRABAJO: el archivo ===== */
.arch{margin:clamp(30px,4vw,60px) 0 0}
.arch-head,.arow{display:grid;grid-template-columns:.32fr 1.9fr 1.25fr 1.9fr .85fr;column-gap:clamp(12px,1.6vw,28px);margin:0 var(--pad);padding:0 var(--cp);align-items:center}
.arch-head{padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.arch-head span:last-child{text-align:right}
.arow{position:relative;border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),opacity .35s}
.arow>*{padding:22px 0;min-width:0}
.ar-i{color:var(--ink-3);transition:color .35s}
.ar-n{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;font-size:clamp(22px,2.4vw,46px);transition:transform .55s var(--ease)}
.ar-n img{flex:none;width:clamp(36px,3.2vw,54px);height:clamp(36px,3.2vw,54px);border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(242,239,232,.85)}
.ar-n span{overflow-wrap:normal}
.ar-a{font-weight:900;letter-spacing:-.045em;line-height:.95;font-size:clamp(22px,2.2vw,40px);white-space:nowrap;transition:color .35s}
.ar-a .unit{display:block;font-size:.45em;letter-spacing:-.02em;text-transform:uppercase;margin-top:.12em}
.ar-l{color:var(--ink-2);font-size:15px;line-height:1.4;transition:color .35s}
.ar-l .label{display:block;margin-top:6px;font-size:11px;transition:color .35s}
.ar-v{text-align:right;color:var(--ink-3)}
.ar-v .tlink{font-size:13px}
.ar-v .label{display:none}
.ar-in{display:none}
.arch.hov .arow:not(.hot){opacity:.38}
.arow.hot{background:var(--rb);color:var(--ri)}
.arow.hot .ar-n{transform:translateX(14px)}
.arow.hot .ar-a{color:var(--rc)}
.arow.hot .ar-i,.arow.hot .ar-l,.arow.hot .ar-l .label,.arow.hot .ar-v{color:var(--ri)}
.arow.hot .ar-l .label{opacity:.7}
.arow.hot .ar-n img{box-shadow:0 0 0 2px var(--ri)}
.reel-cur{position:fixed;left:0;top:0;width:clamp(170px,14vw,240px);aspect-ratio:9/16;z-index:58;pointer-events:none;overflow:hidden;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.55);opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .35s,transform .5s var(--ease)}
.reel-cur.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.reel-cur video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.reel-cur video.on{opacity:1}
.arch-foot{margin:clamp(30px,4vw,60px) var(--pad) 0;padding:0 var(--cp);color:var(--ink-3)}

/* ===== Cierre: tarjeta "Cuéntanos" con casillas (Foudre + Nativz) ===== */
.ask{max-width:620px;margin:0 auto clamp(40px,5vw,80px);padding:clamp(24px,3vw,40px);background:var(--ink);color:#0a0a0a;transform:rotate(-2deg);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.ask .label{color:rgba(10,10,10,.55)}
.ask>b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.95;font-size:clamp(28px,3vw,46px);margin:10px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;gap:9px;border:1.5px solid #0a0a0a;border-radius:999px;padding:10px 16px;font-weight:600;font-size:15px;transition:background .2s,color .2s}
.chips span::before{content:"";width:10px;height:10px;border:1.5px solid currentColor;border-radius:2px;transition:background .2s}
.chips input:checked+span{background:#0a0a0a;color:var(--ink)}
.chips input:checked+span::before{background:#25D366;border-color:#25D366}
.chips input:focus-visible+span{outline:2px solid #E3241B;outline-offset:2px}
.ask-go{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0a0a0a;color:var(--ink);padding:18px 20px;font-weight:700;font-size:16px;transition:background .3s}
.ask-go:hover{background:#E3241B}

/* ===== Móvil ===== */
@media (max-width:820px){
  .ph{padding-top:calc(var(--navh) + 44px)}
  .ph-lead{font-size:18px}

  .svx{grid-template-columns:1fr;padding:0}
  .svx-media{display:none}
  .srow{min-height:0;padding:0 var(--cp)}
  .svx-list.live .srow:not(.act){opacity:1}
  .srow-h{cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;padding:22px 0}
  .srow-h .label{grid-column:1/-1}
  .srow h3{font-size:clamp(34px,10.5vw,52px);margin:6px 0 0}
  .plus{display:block;color:var(--ink)}
  .srow.open .plus{transform:rotate(45deg)}
  .srow-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .srow.open .srow-b{grid-template-rows:1fr}
  .srow-b>div{overflow:hidden}
  .srow ul{padding-bottom:18px}
  .srow-vid{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#111;margin-bottom:24px}

  .pcard{grid-template-columns:1fr;min-height:min(58svh,520px);top:calc(var(--navh) + 14px + var(--i) * 16px);margin-bottom:7vh;align-content:space-between;gap:16px}
  .pc-num{font-size:34vw}
  .pc-body b{font-size:clamp(36px,11vw,54px)}

  .faqx{grid-template-columns:1fr;gap:20px}
  .faqx-t{position:static}
  .faqx summary{font-size:20px;padding:20px 0}

  .manif.mx{height:200vh}
  .mx .manif-txt{font-size:8.3vw;max-width:none}
  .mx-objs{height:62px;gap:10px}

  .arch-head{display:none}
  .arow{grid-template-columns:auto 1fr;column-gap:14px;align-items:start}
  .arow>*{padding:0}
  .ar-i{grid-row:1/5;padding-top:24px}
  .ar-n{padding-top:20px;font-size:6.6vw;gap:10px}
  .ar-v .label-pc{display:none}
  .ar-n img{width:34px;height:34px}
  .ar-a{padding-top:10px;font-size:30px;color:var(--rc2,var(--ink))}
  .ar-l{padding-top:6px;font-size:14px}
  .ar-v{text-align:left;padding:12px 0 20px}
  .ar-v .tlink{display:none}
  .ar-v .label{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
  .ar-v .label::before{content:"";width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .3s}
  .arow.open .ar-v .label::before{transform:rotate(90deg)}
  .ar-in{display:grid;grid-column:1/-1;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
  .arow.open .ar-in{grid-template-rows:1fr}
  .ar-in>div{overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:16px}
  .ar-in video{height:min(118vw,68svh);aspect-ratio:9/16;object-fit:cover;background:#111;margin-top:4px}
  .ar-in .tlink{margin-bottom:24px}
  .arow.open{background:var(--rb);color:var(--ri)}
  .arow.open .ar-a{color:var(--rc)}
  .arow.open .ar-i,.arow.open .ar-l,.arow.open .ar-l .label,.arow.open .ar-v .label{color:var(--ri)}
  .reel-cur{display:none}

  .ask{transform:rotate(-1.2deg);margin-left:var(--pad);margin-right:var(--pad)}
  .chips span{font-size:14px;padding:9px 13px}
}
@media (prefers-reduced-motion:reduce){
  .mx-objs img{opacity:1;transform:none}
  .circ path{stroke-dashoffset:0}
}

/* ===== Añadidos tras el tablero de secciones ===== */
/* Servicios: un objeto recortado flota encima de la lista y se mueve al bajar (K95) */
.svx-list{position:relative}
.svx-obj{position:absolute;right:-5%;top:0;width:clamp(120px,13vw,220px);z-index:3;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));will-change:transform}

/* Quiénes somos: retrato grande rodeado de objetos recortados (K95 + Damn Good) */
.studio-media{overflow:visible}
.pal-obj{position:absolute;z-index:3;width:var(--w);pointer-events:none;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6));transform:rotate(var(--r));animation:flota2 6.5s ease-in-out infinite alternate}
.pal-obj:nth-of-type(2n){animation-duration:7.8s;animation-delay:-2s}
.studio-media video{position:relative;z-index:1}
.studio-media .studio-tag,.studio-media .sound-btn{z-index:4}

/* Trabajo: muestra del color de cada marca en su número */
.ar-i{display:flex;align-items:center;gap:10px}
.ar-i::before{content:"";flex:none;width:12px;height:12px;background:var(--rb);box-shadow:inset 0 0 0 3px var(--rc),0 0 0 1px var(--line)}

/* Pie: dos filas de reels que pasan de lado sin parar (Damn Good) */
.strip{overflow:hidden;padding-top:clamp(70px,8vw,120px);display:grid;gap:12px}
.strip-row{display:flex;gap:12px;width:max-content;animation:pasa 70s linear infinite}
.strip-row.rev{animation-direction:reverse;animation-duration:84s}
.strip-row img{height:clamp(150px,16vw,260px);aspect-ratio:9/16;object-fit:cover;border-radius:6px;background:#111}
@keyframes pasa{to{transform:translateX(-50%)}}
.strip+.foot{padding-top:clamp(40px,5vw,70px)}
.foot-mega{color:var(--ink);font-size:clamp(90px,27.5vw,520px);margin-top:40px}
@media (max-width:820px){
  .svx-obj{display:none}
  .pal-obj{width:calc(var(--w) * 1.5)}
  .strip-row img{height:150px}
}
@media (prefers-reduced-motion:reduce){.strip-row{animation:none}}
/* que nada que sobresalga (objetos) cree scroll de lado; clip no rompe lo pegajoso */
main{overflow-x:clip}
.label-pc{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.circ path{opacity:0;transition:stroke-dashoffset 1s var(--ease),opacity .15s}
.circ.drawn path{opacity:1}
@media (prefers-reduced-motion:reduce){.circ path{opacity:1}}

/* Clientes: la frase del logro empieza siempre en mayúscula */
.ar-l::first-letter{text-transform:uppercase}