/* Páginas interiores nuevas (servicios, estudio, contacto) al nivel de la portada.
   Base: ../v10/v10.css + paginas_pie.css (tira y pie) + cierre.css + nav.css. No toca la portada ni clientes. */

/* Un solo negro de arriba abajo, como la portada */
:root{--bg:#0a0a0a;--negro:#0a0a0a;--rojo:#E3241B}
body{background:var(--negro)}
main{overflow-x:clip}
.nav-links a.on{opacity:1;box-shadow:inset 0 -1px 0 currentColor;padding-bottom:3px}
.menu a.on{color:var(--ink-3)}

/* Letra gigante con volumen (la misma sombra escalonada que "¿HABLAMOS?") */
.vol{font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.85;color:#f2efe8;
  text-shadow:1px 1px 0 #d6d1c7,2px 2px 0 #c3beb4,3px 3px 0 #b0aba1,4px 4px 0 #9d988e,5px 5px 0 #8a857c,6px 6px 0 #77726a,7px 7px 0 #645f58,8px 8px 0 #514d47,0 30px 60px rgba(0,0,0,.7)}
.vol .dot{color:#8b8b8b;text-shadow:none}
.vol-s{text-shadow:1px 1px 0 #c3beb4,2px 2px 0 #9d988e,3px 3px 0 #77726a,4px 4px 0 #514d47,0 20px 40px rgba(0,0,0,.6)}
.kick{display:block;color:var(--ink-3)}

/* ===== Cabecera de cada página: la palabra viene hacia ti al bajar ===== */
.hx{position:relative;padding:calc(var(--navh) + clamp(40px,6vw,96px)) var(--pad) clamp(30px,4vw,60px);text-align:center;perspective:900px}
.hx-crumbs a{color:var(--ink-2)}
.hx-crumbs a:hover{color:var(--ink)}
.hx-t{display:inline-block;white-space:nowrap;font-size:var(--hs,14vw);margin:clamp(20px,2.4vw,36px) 0 clamp(26px,3vw,46px);transform-origin:50% 60%;will-change:transform}
.hx-t .ch{display:inline-block;opacity:0;transform:translateY(.4em) rotate(4deg);transition:opacity .7s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--n) * 45ms)}
.hx.in .hx-t .ch{opacity:1;transform:none}
.hx-lead{font-size:clamp(18px,1.7vw,26px);line-height:1.3;color:var(--ink-2);max-width:34ch;margin:0 auto}
.hx-lead b{color:var(--ink);font-weight:600}

/* bloque de sección sin rayas: solo la etiqueta */
.bloque{padding-top:clamp(70px,9vw,140px)}
.bloque-k{margin:0 var(--pad);padding:0 var(--cp) clamp(18px,2vw,30px)}

/* ===== SERVICIOS: lista fina (K95) con un reel que flota y va a la fila que lees ===== */
.svk{position:relative;margin:0 var(--pad);padding:0 var(--cp)}
.svk-row{display:grid;grid-template-columns:minmax(0,1.15fr) var(--fw) minmax(0,1fr);column-gap:clamp(20px,3vw,56px);align-items:center;padding:clamp(34px,4.4vw,70px) 0;border-top:1px solid var(--line);transition:opacity .5s var(--ease)}
.svk-row:last-of-type{border-bottom:1px solid var(--line)}
.svk{--fw:clamp(170px,15vw,230px)}
.svk.live .svk-row:not(.act){opacity:.3}
.svk-h{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:default}
.svk-h .label{display:block;margin-bottom:12px}
.svk-h h3{font-weight:900;text-transform:uppercase;letter-spacing:-.055em;line-height:.88;font-size:clamp(44px,5.6vw,104px)}
.svk-row.act .svk-h h3{text-shadow:1px 1px 0 #c3beb4,2px 2px 0 #9d988e,3px 3px 0 #77726a,4px 4px 0 #514d47}
.svk-b li{font-size:clamp(16px,1.3vw,20px);color:var(--ink-2);padding:9px 0;display:flex;gap:14px;align-items:baseline}
.svk-b li::before{content:"";flex:none;width:6px;height:6px;background:var(--rojo);border-radius:50%;transform:translateY(-3px)}
.svk-vid,.plus{display:none}
.svk-fl{position:absolute;top:0;left:0;width:var(--fw);aspect-ratio:9/16;z-index:3;pointer-events:none;transition:transform .9s var(--ease)}
.svk-fl-in{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px rgba(0,0,0,.6);transform:rotate(var(--fr,-3deg));transition:transform .9s var(--ease)}
.svk-fl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.svk-fl video.on{opacity:1}
.svk-fl .label{position:absolute;left:10px;bottom:10px;z-index:2;color:var(--ink);background:rgba(10,10,10,.6);padding:5px 9px;border-radius:999px}
.reparto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);margin:clamp(50px,6vw,90px) var(--pad) 0;padding:0 var(--cp)}
.reparto li{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(20px,1.9vw,32px);padding:12px 0}
.reparto .label{display:block;margin-bottom:14px}
.reparto .tu li{color:var(--ink-2)}

/* Cómo empezamos: cartas que caen y se apilan en el centro (Foudre) */
.deck{position:relative;height:calc(100vh + 3 * 55vh)}
.deck-stick{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,70px);padding:var(--navh) calc(var(--pad) + var(--cp)) 0;overflow:hidden}
.deck-t h2{font-size:clamp(38px,3.9vw,72px);line-height:.88;margin-top:16px}
.deck-pile{position:relative;width:clamp(280px,25vw,380px);aspect-ratio:3/4}
.dcard{position:absolute;inset:0;border-radius:22px;padding:clamp(22px,2vw,32px);display:flex;flex-direction:column;justify-content:space-between;background:var(--cb);color:var(--ci);box-shadow:0 30px 70px rgba(0,0,0,.55);will-change:transform}
.dcard .label{color:inherit;opacity:.65}
.dcard .dcard-n{max-width:none;opacity:1;font-weight:900;letter-spacing:-.07em;line-height:.8;font-size:clamp(110px,10vw,170px);text-align:center}
.dcard b{display:block;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(30px,2.6vw,44px);margin-bottom:10px}
.dcard p{font-size:15px;line-height:1.35;opacity:.85;max-width:28ch}
.dcard.c1{--cb:#f2efe8;--ci:#0a0a0a}
.dcard.c2{--cb:var(--rojo);--ci:#f6efe6}
.dcard.c3{--cb:#1c1c1c;--ci:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12)}
.dcard.c4{--cb:#d9d1c1;--ci:#0a0a0a}
.deck-r{align-self:center;max-width:30ch}
.deck-cnt{font-weight:900;letter-spacing:-.05em;font-size:clamp(34px,3vw,52px);line-height:1}
.deck-cnt span{color:var(--ink-3)}
.deck-r p{color:var(--ink-2);font-size:clamp(16px,1.25vw,19px);margin-top:18px}

/* Preguntas frecuentes: rayas finas y un "+" */
.faqk{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,4vw,80px);margin:0 var(--pad);padding:0 var(--cp)}
.faqk h2{font-size:clamp(40px,4.4vw,80px);line-height:.88}
.faqk details{border-top:1px solid var(--line)}
.faqk details:last-child{border-bottom:1px solid var(--line)}
.faqk summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1;font-size:clamp(20px,1.9vw,32px);transition:color .25s}
.faqk summary::-webkit-details-marker{display:none}
.faqk summary:hover{color:var(--ink-2)}
.faqk 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)}
.faqk details[open] summary::after{transform:rotate(45deg)}
.faqk details p{color:var(--ink-2);font-size:clamp(16px,1.3vw,20px);max-width:56ch;padding:0 0 24px}

/* ===== ESTUDIO ===== */
/* La frase con "un solo equipo" rodeado a mano en rojo (Damn Good) */
.frase{padding:clamp(60px,8vw,130px) calc(var(--pad) + var(--cp)) 0;text-align:center}
.frase-t{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.98;font-size:clamp(36px,5.2vw,96px);max-width:17ch;margin:22px auto 0}
.frase-t .w{display:inline-block;opacity:.12;transition:opacity .5s var(--ease);transition-delay:calc(var(--n) * 70ms)}
.frase.in .frase-t .w{opacity:1}
.circ{position:relative;display:inline-block;white-space:nowrap}
.circ svg{position:absolute;left:-6%;top:-18%;width:112%;height:136%;overflow:visible;pointer-events:none}
.circ path{fill:none;stroke:var(--rojo);stroke-width:clamp(3px,.32vw,5px);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.1s var(--ease) 1.25s,opacity .1s 1.25s}
.frase.in .circ path{stroke-dashoffset:0;opacity:1}
.frase-objs{display:flex;justify-content:center;align-items:flex-end;gap:clamp(22px,3.6vw,64px);height:clamp(80px,10vw,150px);margin-top:clamp(36px,4vw,60px)}
.frase-objs img{height:100%;width:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));opacity:0;transform:translateY(40px) rotate(var(--r));transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(1.6s + var(--n) * 110ms)}
.frase.in .frase-objs img{opacity:1;transform:rotate(var(--r))}
.frase-sect{margin-top:clamp(28px,3vw,44px);color:var(--ink-2)}

/* Paloma con un retrato grande (K95 Team) */
.pal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,80px);align-items:center;margin:0 var(--pad);padding:0 var(--cp)}
.pal-t{font-size:clamp(52px,6.4vw,124px);line-height:.86;margin:16px 0 clamp(26px,3vw,44px)}
.pal-who{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pal-who b{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(26px,2.4vw,40px);line-height:1}
.pal .lead{margin:26px 0 30px}
.pal-media{position:relative;perspective:1200px}
.pal-frame{position:relative;border-radius:22px;overflow:hidden;background:#111;box-shadow:0 50px 100px rgba(0,0,0,.6);transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(var(--py,0px));transition:transform .5s var(--ease);will-change:transform}
.pal-frame video{width:100%;aspect-ratio:4/5;max-height:84vh;object-fit:cover}
.pal-frame .studio-tag{border-radius:999px}
.pal-frame .sound-btn{border-radius:999px}

/* ===== CONTACTO: el "¿Hablamos?" como pieza principal ===== */
.cierre.ci-pag{padding-top:calc(var(--navh) + clamp(30px,4vw,70px))}
.ci-pag .ci-k{left:50%;transform:translateX(-50%);white-space:nowrap}
.ci-pag .ci-k a{color:var(--ink-2)}
.ci-pag .ci-lead{text-align:center;font-size:clamp(18px,1.7vw,26px);line-height:1.3;color:var(--ink-2);max-width:36ch;margin:0 auto;padding:0 var(--cp)}
.ci-pag .ci-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-items:stretch;align-items:center;gap:clamp(30px,5vw,100px);max-width:1280px;margin-left:auto;margin-right:auto}
.ci-tilt{perspective:1100px;justify-self:end;width:100%;max-width:560px}
.ci-tilt .ci-card{transform:rotate(-2.5deg) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .5s var(--ease)}
.ci-pag .ci-lado{max-width:none}
.ct-t{font-size:clamp(34px,3.4vw,60px);line-height:.9;margin:14px 0 26px}
.ct-list a,.ct-vigo{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line);transition:padding .4s var(--ease),color .3s}
.ct-vigo{grid-template-columns:110px minmax(0,1fr);border-bottom:1px solid var(--line)}
.ct-list b{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(20px,1.9vw,32px);line-height:1;overflow-wrap:anywhere}
.ct-list .mail b{text-transform:none;letter-spacing:-.03em;font-size:clamp(17px,1.5vw,26px)}
.ct-list .arrow{color:var(--ink-3)}
.ct-list a:hover{padding-left:12px}
.ct-list a:hover .arrow{transform:translateX(6px);color:var(--ink)}
.ct-list .wa b{color:#25D366}
.ct-list span.label{color:var(--ink-3)}
.ct-note{color:var(--ink-3);font-size:14px;margin-top:18px}

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

  .svk{padding:0}
  .svk-fl{display:none}
  .svk-hole{display:none}
  .svk-row{grid-template-columns:1fr;padding:0 var(--cp)}
  .svk.live .svk-row:not(.act){opacity:1}
  .svk-h{cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;padding:22px 0}
  .svk-h .label{grid-column:1/-1;margin-bottom:6px}
  .svk-h h3{font-size:clamp(34px,10.5vw,52px)}
  .svk-row.act .svk-h h3{text-shadow:none}
  .svk-row.open .svk-h h3{text-shadow:1px 1px 0 #c3beb4,2px 2px 0 #9d988e,3px 3px 0 #77726a}
  .plus{display:block;color:var(--ink)}
  .svk-row.open .plus{transform:rotate(45deg)}
  .svk-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .svk-row.open .svk-b{grid-template-rows:1fr}
  .svk-b>div{overflow:hidden}
  .svk-b ul{padding-bottom:18px}
  .svk-vid{display:block;width:72%;margin:0 auto 26px;aspect-ratio:9/16;object-fit:cover;background:#111;border-radius:14px;transform:rotate(-2deg)}
  .reparto{grid-template-columns:1fr;gap:34px}

  .deck{height:calc(100svh + 3 * 50svh)}
  .deck-stick{height:100svh;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;justify-items:center;text-align:center;gap:14px;padding:calc(var(--navh) + 8px) var(--pad) 22px}
  .deck-t h2{font-size:clamp(32px,9vw,44px);margin-top:8px}
  .deck-pile{width:min(68vw,300px,calc((100svh - 330px) * .75))}
  .dcard .dcard-n{font-size:min(28vw,15svh)}
  .dcard b{font-size:clamp(26px,8vw,36px)}
  .dcard p{font-size:14px}
  .deck-r{max-width:34ch}
  .deck-cnt{display:none}
  .deck-r p{margin-top:0;font-size:14px}

  .faqk{grid-template-columns:1fr;gap:20px}
  .faqk summary{font-size:19px;padding:20px 0}

  .frase-t{font-size:clamp(30px,8.6vw,44px)}
  .frase-objs{height:50px;gap:12px}
  .pal{grid-template-columns:1fr;gap:34px}
  .pal-t{font-size:clamp(42px,12.5vw,60px)}
  .pal-media{order:-1}

  .ci-pag .ci-k{white-space:normal;text-align:center;width:100%}
  .ci-pag .ci-grid{grid-template-columns:1fr;gap:56px}
  .ci-tilt{justify-self:stretch}
  .ct-list a,.ct-vigo{grid-template-columns:1fr auto;row-gap:6px}
  .ct-list span.label{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .hx-t .ch,.frase-t .w,.frase-objs img{opacity:1;transform:none}
  .circ path{stroke-dashoffset:0;opacity:1}
}

/* Móvil: volumen más fino para que la letra no se emborrone; el "¿Hablamos?" cabe entero */
@media (max-width:820px){
  .vol{text-shadow:1px 1px 0 #c3beb4,2px 2px 0 #9d988e,3px 3px 0 #77726a,4px 4px 0 #514d47,0 18px 36px rgba(0,0,0,.6)}
  .vol-s{text-shadow:1px 1px 0 #9d988e,2px 2px 0 #514d47}
  .deck-r{display:none}
  .deck-stick{grid-template-rows:auto 1fr}
  .deck-pile{width:min(70vw,300px,calc((100svh - 230px) * .75))}
  .ci-big{font-size:14vw}
}

/* Contacto: la tarjeta entra en la primera pantalla; letra de los datos con aire */
.ci-pag{padding-bottom:0}
.ci-pag .ci-escena{height:clamp(170px,19vw,330px)}
.ci-pag .ci-big{font-size:clamp(60px,11.6vw,220px)}
.ci-pag .ci-grid{margin-top:clamp(30px,3.4vw,56px)}
.ct-t{letter-spacing:-.035em}
.ct-list b{letter-spacing:-.02em}
.ct-list .ig b{text-transform:none}
@media (max-width:820px){.ci-pag .ci-escena{height:200px}.ci-pag .ci-big{font-size:14vw}}

/* 24/10: letras planas, sin volumen (a Paloma no le gusta el 3D) */
.vol,.vol-s,.svk-row.act .svk-h h3{text-shadow:none!important}
/* 24/10: sin efecto 3D al mover el ratón (a Paloma no le gusta) */
.pal-frame{transform:none!important}
.ci-tilt .ci-card{transform:rotate(-2.5deg)!important}