/* ==========================================================================
   GRILLZ Design — hoja de estilos única (briefing web v3.0)
   1. Tokens · 2. Base · 3. Componentes globales · 4. Plantilla de servicio
   Solo cuatro colores. Los tonos intermedios son mezclas o transparencias.
   ========================================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- 1. tokens ---------- */
:root{
  --carbon:#0F0F0E; --brasa:#FF5B14; --hueso:#F2EEE6; --cromo:#C9C8C2;
  /* derivados: transparencias o mezclas de los 4, nunca colores nuevos */
  --hueso-70:rgb(242 238 230 / .7); --hueso-50:rgb(242 238 230 / .5);
  --carbon-70:rgb(15 15 14 / .7); --carbon-55:rgb(15 15 14 / .55);
  --line-d:rgb(242 238 230 / .14); --line-l:rgb(15 15 14 / .14);
  --panel:color-mix(in srgb, var(--hueso) 6%, var(--carbon));
  --brasa-2:color-mix(in srgb, var(--brasa) 86%, var(--carbon)); /* solo menú */
  --brasa-3:color-mix(in srgb, var(--brasa) 72%, var(--carbon));
  --brasa-4:color-mix(in srgb, var(--brasa) 58%, var(--carbon));

  --sans:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --edge:clamp(20px,4vw,64px); --sy:clamp(88px,11vw,168px);
  --nav-h:72px;
  --ease:cubic-bezier(.2,.8,.2,1);

  --fs-h1-home:clamp(42px,min(7vw,11vh),128px);
  --fs-h1:clamp(38px,min(12vw,16vh),170px);
  --fs-h2:clamp(36px,6vw,96px);
  --fs-menu:clamp(30px,min(5.2vw,10vh),92px);
}

/* ---------- 2. base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--carbon);color:var(--hueso);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brasa);outline-offset:4px}
.on-hueso :focus-visible,.on-brasa :focus-visible{outline-color:var(--carbon)}
::selection{background:var(--brasa);color:var(--carbon)}

.skip-link{position:absolute;left:var(--edge);top:-80px;z-index:100;background:var(--brasa);color:var(--carbon);padding:12px 16px;font-weight:600}
.skip-link:focus{top:12px}

.wrap{padding-inline:var(--edge)}
.x{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;overflow-wrap:break-word}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.wm{display:block;fill:currentColor}

section{position:relative}
.sec{padding-block:var(--sy)}
.on-hueso{background:var(--hueso);color:var(--carbon)}
.on-brasa{background:var(--brasa);color:var(--carbon)}

h2.x{font-size:var(--fs-h2)}

/* Grano editorial, solo sobre carbón */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Etiqueta de sección: Plex en cromo con cuadrado brasa */
.label{display:flex;align-items:flex-start;gap:10px;line-height:1.5;font-family:var(--mono);font-size:13px;color:var(--cromo)}
.label::before{content:"";flex:none;width:8px;height:8px;margin-top:calc(.75em - 4px);background:var(--brasa)}
.on-hueso .label{color:var(--carbon-70)}
.on-brasa .label{color:var(--carbon)}
.on-brasa .label::before{background:var(--carbon)}

/* Etiquetas de entregables */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-family:var(--mono);font-size:12.5px;padding:6px 11px;border:1px solid var(--line-d);color:var(--hueso)}
.on-hueso .tags li{border-color:var(--line-l);color:var(--carbon)}

/* Revelado suave, solo en bloques de contenido */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal].d1{transition-delay:.08s}.js [data-reveal].d2{transition-delay:.16s}.js [data-reveal].d3{transition-delay:.24s}

/* ---------- 3. componentes globales ---------- */

/* Botones: bloque brasa sin radio; al pasar el ratón sube 2px y lo cubre el hueso */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;line-height:1.2;padding:15px 24px;background:var(--brasa);color:var(--carbon);transition:transform .25s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hueso);transform:translateY(101%);transition:transform .4s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn--ghost{background:transparent;color:var(--hueso);box-shadow:inset 0 0 0 1px var(--hueso-50)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--carbon)}
.btn--dark{background:var(--brasa);color:var(--carbon);outline:1.5px solid transparent;outline-offset:-1.5px;transition:transform .25s var(--ease),outline-color .25s}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--carbon);outline-color:var(--carbon)}
.on-hueso .btn--ghost{color:var(--carbon);box-shadow:inset 0 0 0 1px var(--carbon-55)}
.on-hueso .btn--ghost::before{background:var(--carbon)}
.on-hueso .btn--ghost:hover,.on-hueso .btn--ghost:focus-visible{color:var(--hueso)}
.btn--sm{padding:12px 18px;font-size:14px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* Enlace de texto: subrayado brasa que se rellena como un fosforito (el gesto de José & Luka) */
.link-u{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;line-height:1.2;padding:5px 6px 7px;margin-left:-6px;transition:color .3s}
.link-u::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;background:var(--brasa)}
.link-u::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brasa);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.link-u:hover,.link-u:focus-visible{color:var(--carbon)}
.link-u:hover::before,.link-u:focus-visible::before{transform:scaleX(1)}
.link-u .arrow{width:15px;height:15px;transition:transform .4s var(--ease)}
.link-u:hover .arrow{transform:translateX(4px)}
.on-brasa .link-u::after,.on-brasa .link-u::before{background:var(--carbon)}
.on-brasa .link-u:hover,.on-brasa .link-u:focus-visible{color:var(--hueso)}

/* Cabecera */
.site-header{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h);padding-inline:var(--edge);transition:background .3s}
.site-header.solid{background:var(--carbon)}
.site-header .logo{display:block;width:112px;color:var(--hueso)}
.nav-r{display:flex;align-items:center;gap:12px}
.menu-btn{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;line-height:1;padding:13px 16px;color:var(--hueso);box-shadow:inset 0 0 0 1px var(--hueso-50);transition:box-shadow .2s}
.menu-btn:hover{box-shadow:inset 0 0 0 1px var(--hueso)}
.menu-btn i{display:block;width:18px;height:2px;background:currentColor;position:relative;top:-3px}
.menu-btn i::after{content:"";position:absolute;left:0;top:6px;width:12px;height:2px;background:currentColor}
@media(max-width:400px){.site-header .logo{width:92px}.nav-r{gap:8px}.menu-btn{padding:13px 12px}.site-header .btn--sm{padding:12px 13px}}

/* Menú overlay: cuatro franjas en tonos de brasa y una en hueso */
.menu{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:var(--nav-h) 1fr auto;background:var(--carbon);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s .6s}
.menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--ease)}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding-inline:var(--edge)}
.menu-top .logo{width:112px;color:var(--hueso)}
.menu-list{display:flex;flex-direction:column;min-height:0}
.menu-list .menu-row{flex:1;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--edge);color:var(--carbon);transform:translateY(30px);opacity:0;transition:transform .5s var(--ease),opacity .5s,padding .3s var(--ease)}
.menu.open .menu-list .menu-row{transform:none;opacity:1}
.menu.open .menu-list .menu-row:nth-child(2){transition-delay:.05s}
.menu.open .menu-list .menu-row:nth-child(3){transition-delay:.1s}
.menu.open .menu-list .menu-row:nth-child(4){transition-delay:.15s}
.menu.open .menu-list .menu-row:nth-child(5){transition-delay:.2s}
.menu-list .menu-row:nth-child(1){background:var(--brasa)}
.menu-list .menu-row:nth-child(2){background:var(--brasa-2)}
.menu-list .menu-row:nth-child(3){background:var(--brasa-3)}
.menu-list .menu-row:nth-child(4){background:var(--brasa-4);color:var(--hueso)}
.menu-list .menu-row:nth-child(5){background:var(--hueso)}
.menu-list a:focus-visible{outline-color:var(--carbon);outline-offset:-6px}
/* toda la fila lleva al servicio; «Contratar» va por encima, aparte */
.menu-row>a{color:inherit;text-decoration:none}
.menu-row>a::after{content:"";position:absolute;inset:0}
.menu-side{flex:0 0 auto;width:min(260px,22vw);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.menu-side .d{max-width:none}
.menu-cta{position:relative;z-index:1;white-space:nowrap;font-family:var(--mono);font-size:13px;font-weight:500;color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .2s}
.menu-cta:hover,.menu-cta:focus-visible{text-decoration-color:currentColor}
.menu-list .t{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:var(--fs-menu);line-height:1}
.menu-list .d{font-family:var(--mono);font-size:13px;max-width:30ch;text-align:right}
.menu-list .menu-row:has(>a:hover){padding-left:calc(var(--edge) + 24px)}
.menu-foot{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:18px var(--edge);font-family:var(--mono);font-size:13px;color:var(--cromo)}
.menu-foot a:hover{color:var(--hueso)}
@media(min-width:721px){.menu-list .t{white-space:nowrap}}
/* el título más largo («Creación de contenido», ~17,4 em) cabe siempre junto a la columna de la derecha */
@media(min-width:721px){.menu-list .t{font-size:min(var(--fs-menu),calc((100vw - 2 * var(--edge) - min(260px,22vw) - 48px) / 17.4))}}
@media(max-width:720px){.menu-list .d{display:none}.menu-side{display:none}.walls--one .tile{height:clamp(200px,36vh,340px)}}
@media(max-height:520px){.menu-list .t{font-size:clamp(22px,7vh,40px)}}

/* Paredes de trabajos: filas de imágenes reales en bucle */
.walls{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.wall-row{display:flex;width:max-content;gap:12px;animation:wall 80s linear infinite}
.wall-row.rev{animation-direction:reverse;animation-duration:95s}
.walls:hover .wall-row,.walls:focus-within .wall-row{animation-play-state:paused}
.tile{position:relative;flex:none;height:clamp(120px,19vh,230px);overflow:hidden;background:var(--panel)}
.walls--one .tile{height:clamp(170px,30vh,340px)}
.tile a{display:block;height:100%}
.tile img{height:100%;width:auto;max-width:none;transition:transform .6s var(--ease)}
.tile figcaption{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:12px;line-height:1.3;background:var(--carbon);color:var(--hueso);padding:4px 8px;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile:hover figcaption,.tile a:focus-visible figcaption{opacity:1;transform:none}
.tile a:focus-visible{outline-offset:-4px}
@keyframes wall{to{transform:translateX(-50%)}}
@media(hover:none){.tile figcaption{opacity:1;transform:none}}

/* Placeholder de contenido pendiente */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-height:200px;padding:24px;background:var(--panel);border:1px dashed var(--hueso-50);font-family:var(--mono);font-size:12px;color:var(--cromo)}
.on-hueso .ph{background:color-mix(in srgb, var(--carbon) 5%, var(--hueso));border-color:var(--carbon-55);color:var(--carbon-70)}

/* Formulario (un solo componente: contacto y páginas de servicio) */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.form legend{font-family:var(--mono);font-size:13px;color:var(--carbon-70)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:17px;color:var(--carbon);background:transparent;border:0;border-bottom:2px solid var(--carbon);border-radius:0;padding:10px 0 12px;appearance:none}
.field textarea{resize:vertical;min-height:120px;line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:var(--carbon-55)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0;border-bottom-color:var(--brasa);box-shadow:0 2px 0 var(--brasa)}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--carbon-70)}
.consent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--carbon)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.form-note{font-size:15px;color:var(--carbon-70)}
.form-note.is-error{color:var(--carbon);font-weight:600}
.form-note a{text-decoration:underline}
.form-success{grid-column:1/-1;padding:28px;border:2px solid var(--carbon);font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.2}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* Footer: estructura del de José & Luka con los datos de GRILLZ */
.site-footer{background:var(--carbon);padding:clamp(64px,8vw,96px) var(--edge) 28px;border-top:1px solid var(--line-d)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-cta h2{font-size:clamp(34px,4.4vw,64px);max-width:10ch;margin-bottom:28px}
.footer-col h3{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--cromo);margin-bottom:16px}
.footer-col a,.footer-col p{display:block;width:fit-content;font-size:16px;margin-bottom:9px;color:var(--hueso)}
.footer-col a:hover{color:var(--brasa)}
.footer-about{margin-top:clamp(48px,6vw,72px);max-width:70ch;color:var(--hueso-70);font-size:15px}
.footer-word{margin:40px 0 24px;color:var(--hueso)}
.footer-word .wm{width:100%;height:auto}
.footer-bottom{display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-d);font-family:var(--mono);font-size:12px;color:var(--cromo)}
.footer-bottom nav{display:flex;gap:20px}
.footer-bottom a:hover{color:var(--hueso)}
@media(max-width:960px){.footer-top{grid-template-columns:1fr 1fr}.footer-cta{grid-column:1/-1}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;gap:32px}}

/* ---------- 4. plantilla de servicio ---------- */

/* 4.1 Hero: nombre enorme, frase con tensión y una pared de trabajos */
.svc-hero{min-height:100svh;padding:calc(var(--nav-h) + clamp(28px,5vh,56px)) 0 24px;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,5vh,56px);overflow:hidden}
.svc-hero .label{margin-bottom:clamp(16px,2.4vh,28px)}
.svc-hero .hero-h{font-size:var(--fs-h1);line-height:.86}
.mask{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.mask>span{display:block;transform:translateY(105%);animation:rise .9s var(--ease) forwards}
.mask:nth-child(2)>span{animation-delay:.08s}
.mask:nth-child(3)>span{animation-delay:.16s}
@keyframes rise{to{transform:none}}
@keyframes fade{to{opacity:1}}
.svc-hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:clamp(20px,3.4vh,40px)}
.svc-tension{font-size:clamp(21px,2.5vw,38px);font-weight:700;line-height:1.14;letter-spacing:-.01em;max-width:26ch;text-wrap:balance}
.svc-tension b{color:var(--brasa);font-weight:inherit}
.svc-hero .walls{opacity:0;animation:fade 1s .3s forwards}
@media(max-width:760px){.svc-hero-foot{grid-template-columns:1fr}}

/* 4.2 ¿Te suena? */
.suena-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.suena-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--carbon)}
.suena-grid li{padding:26px 28px 0 0}
.suena-grid li+li{padding-left:28px;border-left:1px solid var(--line-l)}
.suena-grid .n{font-family:var(--mono);font-size:13px;color:var(--carbon-70)}
.suena-grid h3{font-size:clamp(23px,2.3vw,34px);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:clamp(28px,5vw,72px) 0 14px;text-wrap:balance}
.suena-grid p{color:var(--carbon-70);max-width:34ch}
@media(max-width:860px){
  .suena-grid{grid-template-columns:1fr}
  .suena-grid li,.suena-grid li+li{padding:22px 0 26px;border-left:0;border-bottom:1px solid var(--line-l)}
  .suena-grid h3{margin-top:18px}
}

/* 4.3 Qué incluye */
.incluye-head{margin-bottom:clamp(36px,5vw,64px)}
.incluye{border-top:1px solid var(--line-d)}
.incluye>li{display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr);gap:20px 32px;align-items:start;padding:clamp(26px,3.2vw,44px) 0;border-bottom:1px solid var(--line-d)}
.incluye .n{font-family:var(--mono);font-size:13px;color:var(--cromo);padding-top:.5em}
.incluye h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(24px,2.7vw,42px);line-height:.95}
.incluye p{color:var(--hueso-70);font-size:clamp(17px,1.4vw,20px);max-width:38ch}
.incluye .tags{justify-content:flex-end}
@media(max-width:1000px){
  .incluye>li{grid-template-columns:48px minmax(0,1fr)}
  .incluye p,.incluye .tags{grid-column:2}
  .incluye .tags{justify-content:flex-start}
}
@media(max-width:480px){.incluye>li{grid-template-columns:1fr}.incluye p,.incluye .tags{grid-column:1}.incluye .n{padding-top:0}}

/* 4.4 Por qué con nosotros */
.porque-claim{font-size:clamp(34px,6.2vw,104px);max-width:14ch;margin-top:clamp(20px,3vw,36px)}
.porque-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin-top:clamp(44px,6vw,88px);border-top:2px solid var(--carbon)}
.porque-list li{padding-top:20px;font-size:clamp(19px,1.7vw,24px);font-weight:600;line-height:1.2;max-width:24ch}
.porque-list .n{display:block;font-family:var(--mono);font-size:13px;font-weight:400;margin-bottom:14px}
@media(max-width:760px){.porque-list{grid-template-columns:1fr;border-top:0}.porque-list li{padding:18px 0;border-top:2px solid var(--carbon);max-width:none}}

/* 4.5 Prueba: cada proyecto con su tratamiento */
.prueba-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.caso-xl{position:relative;display:block;min-height:min(78svh,760px);overflow:hidden;background:var(--panel)}
.caso-xl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.caso-xl:hover img{transform:scale(1.04)}
.caso-xl::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--carbon) 0%,rgb(15 15 14 / .55) 38%,rgb(15 15 14 / 0) 70%)}
.caso-xl-body{position:absolute;z-index:1;inset:auto 0 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 40px;align-items:end;padding:clamp(20px,3vw,44px)}
.caso-xl h3{font-size:clamp(56px,9.5vw,160px);line-height:.82}
.caso-xl-body>div{justify-self:end;max-width:46ch}
.caso-xl p{color:var(--hueso);margin-bottom:16px}
.casos{display:grid;grid-template-columns:5fr 4fr 3fr;gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2vw,28px);align-items:start}
.caso{display:flex;flex-direction:column;gap:18px}
.caso .frame{overflow:hidden;background:var(--panel)}
.caso img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.caso:hover img{transform:scale(1.04)}
.caso--a .frame{aspect-ratio:5/4}
.caso--b .frame{aspect-ratio:4/5}
.caso--c .frame{aspect-ratio:3/4}
.caso--b{margin-top:clamp(0px,6vw,96px)}
.caso h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(22px,2.2vw,34px);line-height:.95}
.caso p{color:var(--hueso-70);font-size:16px}
.caso .tags li{font-size:12px;padding:5px 9px}
.caso-more{font-family:var(--mono);font-size:13px;color:var(--cromo)}
.caso:hover h3,.caso-xl:hover h3{color:var(--brasa)}
.caso h3,.caso-xl h3{transition:color .25s}
@media(max-width:900px){
  .caso-xl-body{grid-template-columns:1fr}
  .caso-xl-body>div{justify-self:start}
  .casos{grid-template-columns:1fr 1fr}
  .caso--a{grid-column:1/-1}
  .caso--b{margin-top:0}
  .caso--b .frame,.caso--c .frame{aspect-ratio:4/5}
}
@media(max-width:560px){.casos{grid-template-columns:1fr}}

/* 4.6 Formulario corto */
.svc-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(32px,6vw,96px);align-items:start}
.svc-form h2{font-size:clamp(30px,5.4vw,88px)}
.svc-form-aside{margin-top:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;color:var(--carbon-70);max-width:38ch}
.svc-form-aside a{color:var(--carbon);font-weight:600;text-decoration:underline;text-decoration-color:var(--brasa);text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:900px){.svc-form{grid-template-columns:1fr}}

/* ---------- 5. home ---------- */

/* 5.1 Hero: claim, paredes de trabajo y el wordmark a todo el ancho */
.hero{min-height:100svh;padding:calc(var(--nav-h) + clamp(14px,3vh,40px)) 0 clamp(12px,2.2vh,28px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(16px,2.6vh,32px);overflow:hidden}
.hero-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:end}
.hero .label{margin-bottom:clamp(12px,2vh,22px)}
.hero h1{font-size:clamp(30px,min(4.6vw,7.4vh),76px);line-height:.92}
.hero h1 .mask>span>span{display:inline-block}
.hero-side{max-width:36ch;display:flex;flex-direction:column;gap:18px}
.hero-side p{color:var(--hueso-70)}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero .walls{opacity:0;animation:fade 1s .3s forwards}
.hero .tile{height:clamp(84px,13.5vh,170px)}
.hero-word{overflow:hidden;color:var(--hueso)}
.hero-word .wm{width:100%;height:auto;transform:translateY(105%);animation:rise 1s var(--ease) .25s forwards}
@media(max-width:860px){
  .hero-head{grid-template-columns:1fr}
  .hero .tile{height:clamp(84px,13vh,130px)}
}

/* 5.2 Manifiesto */
.manifiesto{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:28px clamp(32px,6vw,96px);align-items:end}
.manifiesto h2{font-size:clamp(30px,4.6vw,68px);font-weight:700;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.manifiesto p{font-size:clamp(18px,1.5vw,21px);color:var(--carbon-70);max-width:34ch}
@media(max-width:860px){.manifiesto{grid-template-columns:1fr}}

/* 5.3 ¿Qué hacemos?: cuatro cards altas, una por servicio */
.que-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:clamp(36px,5vw,64px)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{--pad:clamp(20px,2vw,30px);position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:clamp(440px,66vh,640px);padding:var(--pad);background:var(--panel);overflow:hidden}
.card-media{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease)}
.card-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .9s var(--ease)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--carbon) 8%,rgb(15 15 14 / .82) 55%,rgb(15 15 14 / .45))}
.card-media .ph{height:100%;min-height:0;border:0}
.card:hover .card-media,.card:focus-visible .card-media{opacity:1}
.card:hover .card-media img{transform:none}
.card-top{position:absolute;inset:var(--pad) var(--pad) auto;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:13px;color:var(--cromo)}
.card-name{font-family:var(--sans);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(15px,1.25vw,19px);line-height:1;color:var(--brasa)}
.card h2{font-size:clamp(25px,2.35vw,38px);font-weight:700;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.card p{color:var(--hueso-70);font-size:16px}
.card .tags li{font-size:12px;padding:5px 9px}
.card-more{align-self:flex-start;margin-top:6px}
.card:hover .card-more{color:var(--carbon)}
.card:hover .card-more::before{transform:scaleX(1)}
.card:hover .card-more .arrow{transform:translateX(4px)}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card{min-height:clamp(380px,52vh,520px)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
/* En táctil y móvil la imagen va fija encima de cada card */
@media(hover:none),(max-width:620px){
  .card{padding-top:0;justify-content:flex-start;min-height:0}
  .card-media{position:relative;inset:auto;z-index:0;order:-2;opacity:1;aspect-ratio:4/5;margin:0 calc(var(--pad) * -1) 6px}
  .card-media img{position:absolute;inset:0;transform:none}
  .card-media::after{background:linear-gradient(to top,var(--panel),rgb(15 15 14 / 0) 45%)}
  .card-top{position:static;order:-3;inset:auto;padding-top:var(--pad);margin-bottom:2px}
}

/* 5.4 Reels que funcionan */
.reels{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px clamp(32px,6vw,96px);align-items:center}
.reels h2{margin:18px 0 clamp(28px,4vw,56px)}
.kpis{display:grid;gap:clamp(20px,3vw,36px);margin-bottom:clamp(28px,4vw,48px)}
.kpi strong{display:block;font-stretch:125%;font-weight:900;letter-spacing:-.02em;font-size:clamp(50px,8.4vw,136px);line-height:.86;color:var(--brasa)}
.kpi span{display:block;margin-top:10px;font-family:var(--mono);font-size:13px;color:var(--cromo)}
.reel-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.reel{position:relative}
.reel-media{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--panel)}
.reel-media video{width:100%;height:100%;object-fit:cover}
.reel-toggle{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;background:var(--carbon);color:var(--hueso)}
.reel-toggle svg{width:14px;height:14px}
.reel-toggle .i-play,.is-paused .reel-toggle .i-pause{display:none}
.is-paused .reel-toggle .i-play{display:block}
.reel-meta span{white-space:nowrap}
.reel-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--cromo)}
.reel-meta h3{min-width:0;overflow-wrap:anywhere;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--hueso)}
@media(max-width:860px){.reels{grid-template-columns:1fr}}

/* 5.5 Trabajo destacado */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-foot{display:flex;justify-content:center;margin-top:clamp(40px,5vw,72px)}

/* 5.6 Agencias */
.agencias{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;gap:24px 40px;align-items:center;padding:clamp(26px,4vw,56px);border:1px solid var(--brasa)}
.agencias h2{font-size:clamp(28px,3.6vw,54px)}
.agencias p{color:var(--hueso-70);max-width:54ch}
@media(max-width:1000px){.agencias{grid-template-columns:1fr}.agencias .btn{justify-self:start}}

/* 5.7 Cierre con Luka: escena fija ligada al scroll (JS solo escribe --p) */
.luka{position:relative;height:340vh;background:var(--carbon)}
.luka-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.duo{position:absolute;overflow:hidden;background:var(--brasa)}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.05);mix-blend-mode:multiply}
.duo.main{width:calc(30vw + 70vw * var(--p,0));height:calc(42vh + 58vh * var(--p,0));z-index:2}
.duo.main img{object-position:50% 72%;transform:scale(calc(1.25 - .25 * var(--p,0)))}
.duo.side{width:18vw;height:30vh;opacity:calc(1 - var(--p,0) * 1.6)}
.duo.s1{left:6vw;top:14vh;transform:translateY(calc(var(--p,0) * -40vh))}
.duo.s2{right:6vw;bottom:12vh;transform:translateY(calc(var(--p,0) * 40vh))}
.duo.s3{left:12vw;bottom:8vh;width:12vw;height:20vh;transform:translateX(calc(var(--p,0) * -30vw))}
.duo.s4{right:14vw;top:10vh;width:12vw;height:20vh;transform:translateX(calc(var(--p,0) * 30vw))}
.duo.s1 img{object-position:30% 20%}.duo.s2 img{object-position:60% 70%}.duo.s3 img{object-position:50% 50%}.duo.s4 img{object-position:20% 80%}
.duo .tag-ph{position:absolute;inset:auto 8px 8px auto;font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--carbon);background:var(--hueso);padding:3px 6px}
.claim{position:relative;z-index:3;text-align:center;font-size:clamp(40px,9vw,160px);color:var(--hueso);pointer-events:none;padding:0 var(--edge)}
.claim span{display:block}
.js .claim span{opacity:0;transform:translateY(40px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .claim span.on{opacity:1;transform:none}
.luka-cap{position:absolute;z-index:3;left:var(--edge);bottom:24px;font-family:var(--mono);font-size:12px;color:var(--hueso);opacity:calc(var(--p,0) * 2 - 1)}
@media(max-width:720px){
  .duo.main{width:calc(56vw + 44vw * var(--p,0));height:calc(40vh + 60vh * var(--p,0))}
  .duo.side{width:30vw;height:22vh}
  .duo.s1{left:4vw;top:10vh}.duo.s2{right:4vw;bottom:9vh}
  .duo.s3,.duo.s4{width:22vw;height:15vh}
  .duo.s3{left:6vw;bottom:6vh}.duo.s4{right:6vw;top:8vh}
}

/* ---------- 6. edición de vídeo ---------- */
.vcasos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start}
.vcaso{display:flex;flex-direction:column;gap:14px}
.vcaso--wide{grid-column:span 2}
.vcaso h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(20px,1.9vw,30px);line-height:.95}
.vcaso p{color:var(--hueso-70);font-size:16px}
.vcaso .ph{aspect-ratio:9/16;min-height:0}
.vcaso .kpis{grid-template-columns:1fr 1fr;margin:6px 0 0}
.vcaso .kpi strong{font-size:clamp(34px,4.2vw,68px)}
.quote{margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--line-d);font-size:clamp(22px,2.4vw,36px);font-weight:700;line-height:1.14;max-width:30ch;text-wrap:balance}
@media(max-width:1000px){.vcasos{grid-template-columns:repeat(3,minmax(0,1fr))}.vcaso--wide{grid-column:1/-1}}
@media(max-width:560px){.vcaso .kpis{grid-template-columns:1fr}.vcasos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.vcaso:last-child{grid-column:1/-1;max-width:calc(50% - 6px)}}

.piezas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.piezas li{padding:clamp(22px,2.6vw,36px);border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.piezas .n{font-family:var(--mono);font-size:13px;color:var(--cromo)}
.piezas h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(19px,1.7vw,26px);line-height:1;margin:clamp(28px,4vw,56px) 0 12px}
.piezas p{color:var(--hueso-70);font-size:16px}
@media(max-width:900px){.piezas{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.piezas{grid-template-columns:1fr}.piezas h3{margin-top:18px}}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--carbon)}
.steps li{padding:24px 24px 0 0}
.steps li+li{padding-left:24px;border-left:1px solid var(--line-l)}
.steps .n{font-family:var(--mono);font-size:13px;color:var(--carbon-70)}
.steps h3{font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.1;margin:clamp(24px,4vw,56px) 0 12px}
.steps p{color:var(--carbon-70);font-size:16px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li,.steps li+li{padding:22px 16px 26px 0;border-left:0;border-bottom:1px solid var(--line-l)}.steps h3{margin-top:16px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

.packs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pack{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,44px);background:var(--panel)}
.pack h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(34px,4.6vw,72px);line-height:.9}
.pack ul{display:grid;gap:8px;color:var(--hueso-70)}
.pack li{padding-left:18px;position:relative}
.pack li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--brasa)}
.pack .btn{align-self:flex-start;margin-top:auto}
@media(max-width:700px){.packs{grid-template-columns:1fr}}

/* FAQ */
.faq-grid h2{font-size:clamp(26px,2.8vw,48px)}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.faq{border-top:1px solid var(--line-d)}
.faq details{border-bottom:1px solid var(--line-d)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(18px,1.6vw,22px);font-weight:600;line-height:1.2;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{flex:none;position:relative;width:16px;height:16px}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--brasa);transition:transform .3s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:none}
.faq .answer{padding:0 0 24px;color:var(--hueso-70);max-width:60ch}
.faq .answer a{color:var(--hueso);text-decoration:underline;text-decoration-color:var(--brasa);text-decoration-thickness:2px;text-underline-offset:4px}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* ---------- 7. trabajo ---------- */
.page-hero{padding:calc(var(--nav-h) + clamp(40px,8vh,96px)) 0 clamp(40px,5vw,72px)}
.page-hero .hero-h{font-size:var(--fs-h1);line-height:.86;margin-top:clamp(16px,2.4vh,28px)}
.page-hero .hero-h.long{font-size:clamp(36px,7.4vw,124px);line-height:.9;max-width:14ch}
.page-hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:clamp(24px,4vh,48px)}
.page-hero .lede{font-size:clamp(19px,1.8vw,26px);font-weight:600;line-height:1.2;max-width:40ch;text-wrap:balance}
@media(max-width:860px){.page-hero-row{grid-template-columns:1fr}}

.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font-family:var(--mono);font-size:13px;line-height:1;padding:11px 14px;color:var(--hueso);box-shadow:inset 0 0 0 1px var(--hueso-50);transition:background .2s,color .2s}
.filters button:hover{box-shadow:inset 0 0 0 1px var(--hueso)}
.filters button[aria-pressed="true"]{background:var(--brasa);color:var(--carbon);box-shadow:none}

.t-case{padding-block:clamp(56px,7vw,112px)}
.t-case[hidden],.t-empty[hidden]{display:none}
.t-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.t-head h2{font-size:clamp(40px,8vw,128px);line-height:.84}
.t-head h2.long{font-size:clamp(34px,5.4vw,88px);line-height:.9}
.t-head .lede{font-size:clamp(17px,1.4vw,20px);color:var(--hueso-70);margin-bottom:16px;max-width:52ch}
.on-hueso .t-head .lede{color:var(--carbon-70)}
.frame{overflow:hidden;background:var(--panel)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame--hover img{transition:transform .8s var(--ease)}
.frame--hover:hover img{transform:scale(1.04)}
.frame--video{position:relative}
@media(max-width:860px){.t-head{grid-template-columns:1fr}}

/* Taruh: imagen a sangre con el texto encima, seguida de un díptico */
.t-taruh{padding-top:0}
.t-bleed{position:relative;min-height:min(92svh,900px);display:flex;align-items:flex-end;overflow:hidden}
.t-bleed>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--carbon) 2%,rgb(15 15 14 / .6) 34%,rgb(15 15 14 / 0) 66%)}
.t-bleed .t-head{position:relative;z-index:1;width:100%;margin:0;padding:clamp(24px,4vw,56px) var(--edge)}
.t-bleed .lede{color:var(--hueso)}
.dip{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px var(--edge) 0}
.dip .frame{aspect-ratio:16/9}
@media(max-width:700px){.dip{grid-template-columns:1fr}}

/* Núcleo: mosaico de campaña + antes / intervención / resultado */
.mosaic{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px}
.mosaic .m1{grid-row:1/3}
.mosaic .m2,.mosaic .m3{aspect-ratio:4/5}
.mosaic .m4{grid-column:2/4;aspect-ratio:16/10}
.abr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--line-d)}
.abr div{padding-top:20px}
.abr h3{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--brasa);margin-bottom:12px}
.abr p{color:var(--hueso-70)}
.abr-note{margin-top:24px;font-family:var(--mono);font-size:12.5px;color:var(--cromo);max-width:70ch}
@media(max-width:860px){
  .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .m1{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
  .mosaic .m4{grid-column:1/-1}
  .abr{grid-template-columns:1fr}
}

/* Chvck: vídeos en bucle alternados con las imágenes */
.t-chvck .stack{display:grid;gap:12px}
.t-chvck .frame--video{aspect-ratio:1400/750}
.t-chvck .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.t-chvck .pair .frame{aspect-ratio:1600/1254}
@media(max-width:700px){.t-chvck .pair{grid-template-columns:1fr}}

/* Mr. Jreature: formato de detalle sobre hueso */
.detalle{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detalle .frame{height:min(86svh,820px);background:color-mix(in srgb, var(--carbon) 6%, var(--hueso))}
@media(max-width:700px){.detalle{grid-template-columns:1fr}.detalle .frame{height:auto;aspect-ratio:4/5}}

.t-empty{padding-block:clamp(56px,7vw,112px)}
.banda{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;padding:clamp(28px,4vw,56px) var(--edge)}
.banda p{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(26px,4.2vw,64px);line-height:.92}

/* ---------- 8. contacto ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px clamp(32px,6vw,96px);align-items:start}
.mode-switch{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;min-width:0}
.mode-switch legend{margin-bottom:12px}
.mode-opt{position:relative}
.mode-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.mode-opt label{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px;box-shadow:inset 0 0 0 1px var(--carbon-55);cursor:pointer;transition:background .2s,color .2s}
.mode-opt label b{font-family:var(--sans);font-size:19px;font-weight:700;color:var(--carbon);line-height:1.15}
.mode-opt label span{font-family:var(--sans);font-size:15px;color:var(--carbon-70)}
.mode-opt label .k{font-family:var(--mono);font-size:12px}
.mode-opt input:checked+label{background:var(--carbon)}
.mode-opt input:checked+label b{color:var(--hueso)}
.mode-opt input:checked+label span{color:var(--hueso-70)}
.mode-opt input:focus-visible+label{outline:2px solid var(--brasa);outline-offset:3px}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--carbon) 50%),linear-gradient(135deg,var(--carbon) 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 8px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px}
.field .opt{color:var(--carbon-70)}
.aside{display:grid;gap:28px}
.aside h2{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--carbon-70);margin-bottom:8px}
.aside a{font-weight:600;text-decoration:underline;text-decoration-color:var(--brasa);text-decoration-thickness:2px;text-underline-offset:4px}
.aside .big{font-size:clamp(20px,2vw,28px);font-weight:700;overflow-wrap:anywhere}
.aside p{color:var(--carbon-70)}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
@media(max-width:520px){.mode-switch{grid-template-columns:1fr}}

/* ---------- 9. legales y 404 ---------- */
.legal{max-width:calc(760px + var(--edge) * 2);padding:0 var(--edge) var(--sy)}
.legal h2{font-size:clamp(22px,2vw,28px);font-weight:700;margin:40px 0 12px}
.legal p,.legal li{color:var(--hueso-70);margin-bottom:12px}
.legal ul{list-style:disc;padding-left:20px}
.legal a{color:var(--hueso);text-decoration:underline;text-decoration-color:var(--brasa);text-underline-offset:3px}
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 40px) var(--edge) 80px}
.nf h1{font-size:clamp(110px,30vw,420px);line-height:.8;color:var(--brasa)}
.nf p{max-width:36ch;margin:28px auto;color:var(--hueso-70);font-size:19px}

/* ---------- 10. piezas sueltas ---------- */
.wall-static{display:flex;gap:12px;padding-inline:var(--edge)}
.wall-static .tile{flex:1;min-width:0;background:none}
.wall-static .ph{width:100%;aspect-ratio:auto!important;min-height:0}
@media(max-width:620px){.wall-static .tile:nth-child(n+2){display:none}}
.caso-xl--web{min-height:min(52svh,460px);background:var(--panel);border:1px solid var(--line-d)}
.caso-xl--web::after{display:none}
.caso-xl--web .caso-xl-body{align-items:end}

/* Titulares largos: Archivo 700 en caja normal, no Expanded */
.h2-t{font-size:clamp(30px,4.6vw,68px);font-weight:700;line-height:1.04;letter-spacing:-.015em;max-width:18ch;text-wrap:balance}
.label+.h2-t{margin-top:18px}

@media(max-width:400px){.vcasos{grid-template-columns:1fr}.vcaso:last-child{max-width:none}.vcaso .ph{aspect-ratio:16/9}}

/* ---------- 11. home: hero mínimo, claim, texto que se rellena, cinta y carrusel ---------- */
.hero2{position:relative;height:100svh;min-height:520px;overflow:hidden;display:grid;place-items:center}
.hero2-media{position:relative;width:min(34vw,56vh);min-width:230px;aspect-ratio:4/5;margin-bottom:11vh;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px var(--line-d);opacity:0;transform:translateY(48px) scale(.95);animation:heroIn 1.1s var(--ease) .1s forwards}
.hero2-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero2-media img.on{opacity:1}
.hero2-word{position:absolute;left:-1.2vw;right:-1.2vw;bottom:-1.8vw;z-index:2;overflow:hidden;color:var(--hueso);pointer-events:none}
.hero2-word .wm{width:100%;height:auto;transform:translateY(105%);animation:rise 1.2s var(--ease) .3s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
@media(max-width:720px){.hero2-media{width:min(74vw,52vh);margin-bottom:9vh}}

.que{padding-top:clamp(72px,9vw,140px)}
.que-claim{font-size:clamp(34px,6.6vw,108px);max-width:13ch}
.que-sub{max-width:52ch;color:var(--hueso-70);font-size:clamp(17px,1.4vw,20px)}
.js .card[data-reveal]{transform:translateY(72px);transition-duration:.9s}
.js .card[data-reveal].is-in{transform:none}

.nosotros{padding-top:0}
.nosotros-grid{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,5fr);gap:24px;align-items:start}
.nosotros-grid .label{padding-top:.9em}
.fill{font-size:clamp(28px,4.5vw,70px);font-weight:600;line-height:1.08;letter-spacing:-.02em;max-width:30ch}
.js .fill .w{color:color-mix(in srgb, var(--hueso) 40%, var(--carbon));transition:color .35s var(--ease)}
.js .fill .w.on{color:var(--hueso)}
.nosotros-ctas{margin-top:clamp(32px,4vw,56px)}
@media(max-width:760px){.nosotros-grid{grid-template-columns:1fr}.nosotros-grid .label{padding-top:0}}

.cinta{overflow:hidden;padding:clamp(22px,3vw,44px) 0;border-block:1px solid var(--line-d)}
.cinta-track{display:flex;align-items:center;width:max-content;animation:wall 36s linear infinite}
.cinta-track span{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(44px,9vw,150px);line-height:1;white-space:nowrap}
.cinta-track i{flex:none;width:.2em;height:.2em;margin:0 clamp(22px,3vw,52px);font-size:clamp(44px,9vw,150px);background:var(--brasa)}

.proy{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,3fr);align-items:center;padding-left:var(--edge)}
.proy-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-right:28px}
.proy-side h2{font-size:clamp(30px,3.3vw,56px)}
.proy-nav{display:flex;gap:8px;margin-top:8px}
.proy-nav button{display:grid;place-items:center;width:46px;height:46px;color:var(--hueso);box-shadow:inset 0 0 0 1px var(--hueso-50);transition:background .2s,color .2s}
.proy-nav button:hover{background:var(--brasa);color:var(--carbon);box-shadow:none}
.proy-nav svg{width:18px;height:18px}
.proy-track{display:flex;column-gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--edge) 8px 0;scrollbar-width:none;cursor:grab}
.proy-track::-webkit-scrollbar{display:none}
.proy-track:focus-visible{outline-offset:-2px}
.proy-card{flex:none;width:clamp(250px,31vw,480px);scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.proy-card .frame{width:100%;aspect-ratio:4/3}
.proy-card img{transition:transform .8s var(--ease)}
.proy-card:hover img{transform:scale(1.04)}
.proy-card h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(21px,2.1vw,32px);line-height:.95;transition:color .25s}
.proy-card:hover h3{color:var(--brasa)}
.proy-card p{color:var(--hueso-70);font-size:16px}
.proy-card:hover .link-u{color:var(--carbon)}
.proy-card:hover .link-u::before{transform:scaleX(1)}
@media(max-width:860px){
  .proy{grid-template-columns:1fr;gap:28px}
  .proy-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-right:var(--edge)}
  .proy-side h2{width:100%}
  .proy-nav{margin-top:0}
  .proy-card{width:78vw}
}

/* vídeo: bloque de Nires 3D + casos pendientes */
.reels-lede{color:var(--hueso-70);max-width:48ch}
.vcasos--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,72px)}
.vcasos--3 .ph{aspect-ratio:4/5}
@media(max-width:700px){.vcasos--3{grid-template-columns:1fr}.vcasos--3 .vcaso:last-child{max-width:none}.vcasos--3 .ph{aspect-ratio:16/9}}

/* ---------- 12. titulares por palabras, hero de servicio sin pared, cintas sin barra ---------- */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em 0 .1em;margin:-.16em 0 -.1em}
.js .wd>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.js .is-in .wd>span{transform:none}
.svc-hero--bare{min-height:0;padding-bottom:0}
.svc-hero--bare+.sec{padding-top:clamp(48px,6vw,96px)}
.svc-hero .hero-h{line-height:.93}
.walls,.cinta{overflow:hidden}

/* ---------- 13. hero de la home a pantalla completa ---------- */
.hero2{display:block}
.hero2-media{position:absolute;inset:0;width:auto;min-width:0;aspect-ratio:auto;margin:0;box-shadow:none;transform:scale(1.06);animation:heroIn 1.6s var(--ease) forwards}
.hero2-media img,.hero2-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s linear}
.hero2-media .on{opacity:1}
/* velo para que la cabecera y el nombre se lean sobre cualquier imagen */
.hero2-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgb(15 15 14 / .7) 0%,rgb(15 15 14 / .2) 26%,rgb(15 15 14 / .2) 58%,rgb(15 15 14 / .78) 100%)}
@media(max-width:720px){.hero2-media{width:auto;margin:0}}

/* ---------- 14. cards de servicios con el borde redondeado (el resto del sitio sigue en ángulo recto) ---------- */
.card{border-radius:clamp(16px,1.6vw,24px)}

/* ---------- 15. galerías de los casos (trabajo.html) ---------- */
.galeria{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(90px,11.5vw,200px);gap:12px;margin-top:12px}
.galeria .frame{min-height:0}
.g-c2{grid-column:span 2}.g-c3{grid-column:span 3}.g-c4{grid-column:span 4}.g-c6{grid-column:span 6}
.g-r1{grid-row:span 1}.g-r2{grid-row:span 2}.g-r3{grid-row:span 3}
.frame--claro{background:var(--hueso)}
.frame--claro img{object-fit:contain;padding:6%}
.t-taruh .galeria{margin-top:12px}
.on-hueso .galeria .frame{background:color-mix(in srgb, var(--carbon) 6%, var(--hueso))}
.on-hueso .galeria .frame--claro{background:var(--hueso);box-shadow:inset 0 0 0 1px var(--line-l)}
@media(max-width:700px){
  .galeria{grid-template-columns:1fr 1fr;grid-auto-rows:34vw;grid-auto-flow:dense;gap:8px}
  .g-c2{grid-column:span 1}.g-c3,.g-c4,.g-c6{grid-column:span 2}
  .g-r3{grid-row:span 2}
}


/* ---------- 17. dirección estratégica (19/10/2026) ---------- */
.nosotros-modelo{margin-top:22px;font-size:13px;letter-spacing:.06em;color:var(--cromo)}
.incluye-nota{margin-top:clamp(24px,3vw,40px);font-size:13px;color:var(--cromo)}
.on-hueso .incluye-nota{color:var(--carbon-70)}
.cruce{padding-top:0}
.cruce-txt{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:clamp(20px,1.9vw,28px);font-weight:600;letter-spacing:-.01em}


/* ---------- 18. filmmaking: titular en una línea y reels en iPhone vertical (21/10/2026) ---------- */
/* «FILMMAKING» mide 8,63 veces su tamaño de letra: se limita al ancho disponible para que no parta */
.svc-hero .hero-h.h1-una-linea{white-space:nowrap;font-size:min(var(--fs-h1),calc((100vw - 2 * var(--edge)) / 8.9))}
/* iPhone vertical dibujado en CSS, sin fondo: marco grafito, pantalla redondeada, isla y botones laterales */
.reel-pair{gap:clamp(16px,3vw,40px)}
.reel-pair .reel,.vcasos--3 .vcaso{max-width:330px;width:100%;justify-self:center}
.reel-pair .reel-media,.vcasos--3 .ph{position:relative;aspect-ratio:9/19.5;padding:3.4%;border-radius:15%/7%;overflow:visible;background:linear-gradient(145deg,#3a3a37,#161615 45%,#262624);box-shadow:inset 0 0 0 1.5px #4a4a46,inset 0 0 0 4px #0a0a09,0 24px 48px -18px rgb(0 0 0 / .7)}
.reel-pair .reel-media video{display:block;width:100%;height:100%;object-fit:cover;border-radius:12.5%/5.8%;background:#050505}
.reel-pair .reel-media::before,.vcasos--3 .ph::before{content:"";position:absolute;z-index:2;top:5%;left:50%;width:30%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:#050505}
.reel-pair .reel-media::after,.vcasos--3 .ph::after{content:"";position:absolute;left:-1.6%;top:20%;width:1.6%;height:11%;border-radius:3px 0 0 3px;background:#2c2c2a;box-shadow:0 14% 0 #2c2c2a}
.reel-pair .reel-toggle{right:9%;bottom:4.6%;z-index:3;border-radius:50%}
.reel-pair .reel-meta{padding-inline:4%}
.vcasos--3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(24px,3vw,48px) clamp(16px,3vw,40px)}
.vcasos--3 .ph{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;color:var(--cromo);border:0}
.vcasos--3 .ph span{position:relative;z-index:1}
.vcasos--3 .vcaso:nth-child(3):last-child{grid-column:1/-1;max-width:min(330px,calc(50% - 20px))!important;justify-self:center}
@media(max-width:700px){.vcasos--3 .ph{aspect-ratio:9/19.5!important}.vcasos--3 .vcaso h3{font-size:clamp(13px,3.8vw,22px);overflow-wrap:anywhere}.vcasos--3 .vcaso p{font-size:11px}}

/* ---------- 19. filmmaking: caso destacado tipo «resultados» y fila de 3 iPhone (21/10/2026) ---------- */
/* el marco de iPhone de la sección 18 se extiende a la fila y al caso destacado */
:is(.vrow,.vcase2-phone) .reel{max-width:300px;width:100%;justify-self:center;margin-inline:auto}
:is(.vrow,.vcase2-phone) .reel-media{position:relative;aspect-ratio:9/19.5;padding:3.4%;border-radius:15%/7%;overflow:visible;background:linear-gradient(145deg,#3a3a37,#161615 45%,#262624);box-shadow:inset 0 0 0 1.5px #4a4a46,inset 0 0 0 4px #0a0a09,0 24px 48px -18px rgb(0 0 0 / .7)}
:is(.vrow,.vcase2-phone) .reel-media video{display:block;width:100%;height:100%;object-fit:cover;border-radius:12.5%/5.8%;background:#050505}
:is(.vrow,.vcase2-phone) .reel-media::before{content:"";position:absolute;z-index:2;top:5%;left:50%;width:30%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:#050505}
:is(.vrow,.vcase2-phone) .reel-media::after{content:"";position:absolute;left:-1.6%;top:20%;width:1.6%;height:11%;border-radius:3px 0 0 3px;background:#2c2c2a}
:is(.vrow,.vcase2-phone) .reel-toggle{right:9%;bottom:4.6%;z-index:3;border-radius:50%}
:is(.vrow,.vcase2-phone) .reel-meta{padding-inline:4%}
.reel-ph{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:12%;text-align:center;border-radius:12.5%/5.8%;background:linear-gradient(160deg,#20201f,#141413);font-family:var(--mono);font-size:12px;color:var(--cromo)}

/* caso destacado: móvil inclinado a la izquierda, nombre enorme y cifras en cajas a la derecha */
.vcase2-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:center}
.vcase2-phone .reel{max-width:340px;transform:rotate(-6deg)}
.vcase2-title{font-size:clamp(44px,8.4vw,150px);line-height:.86;margin-top:14px}
.vcase2-tag{margin-top:clamp(12px,1.6vw,20px);font-size:clamp(13px,1.1vw,16px);color:var(--brasa);letter-spacing:.06em}
.vstats{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:clamp(24px,3vw,44px) clamp(32px,5vw,80px);margin-top:clamp(32px,4vw,56px)}
.vstats li{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.vstats-wide{grid-column:1/-1;justify-self:center}
.vstats strong{font-stretch:125%;font-weight:900;letter-spacing:-.02em;line-height:.86;font-size:clamp(48px,6.4vw,112px);color:var(--brasa)}
.vstats span{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(14px,1.3vw,20px);padding:6px 12px;box-shadow:inset 0 0 0 2px var(--hueso)}
.vcase2-nota{margin-top:clamp(28px,3.4vw,48px);font-size:11px;color:var(--cromo);letter-spacing:.04em}

/* fila de 3 iPhone, bien alineados */
.vrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin-top:clamp(64px,8vw,128px);align-items:start}
.vrow-nota{margin-top:clamp(24px,3vw,40px);text-align:center;font-size:12px;color:var(--cromo)}

@media(max-width:860px){
  .vcase2-grid{grid-template-columns:minmax(0,1fr)}
  .vcase2-phone .reel{max-width:240px}
  .vstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vstats-wide{justify-self:start}
}
/* en móvil la fila se desliza en horizontal con imán, sin desbordar la página */
@media(max-width:620px){
  .vrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--edge) 8px;margin-inline:calc(var(--edge) * -1);scrollbar-width:none}
  .vrow::-webkit-scrollbar{display:none}
  .vrow .reel{flex:0 0 62%;scroll-snap-align:center;max-width:none}
  .vstats strong{font-size:clamp(40px,13vw,64px)}
  .vstats{gap:24px 20px}
  .vstats span{font-size:12px;padding:5px 9px}
}
@media(max-width:400px){.vstats{grid-template-columns:minmax(0,1fr)}}

/* ---------- 20. caso destacado con un iPhone grande a la derecha (21/10/2026) ---------- */
.reels--uno{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.reel-uno .reel{max-width:360px;width:100%;margin-inline:auto}
.reel-uno .reel-media{position:relative;aspect-ratio:9/19.5;padding:3.4%;border-radius:15%/7%;overflow:visible;background:linear-gradient(145deg,#3a3a37,#161615 45%,#262624);box-shadow:inset 0 0 0 1.5px #4a4a46,inset 0 0 0 4px #0a0a09,0 24px 48px -18px rgb(0 0 0 / .7)}
.reel-uno .reel-media video{display:block;width:100%;height:100%;object-fit:cover;border-radius:12.5%/5.8%;background:#050505}
.reel-uno .reel-media::before{content:"";position:absolute;z-index:2;top:5%;left:50%;width:30%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:#050505}
.reel-uno .reel-media::after{content:"";position:absolute;left:-1.6%;top:20%;width:1.6%;height:11%;border-radius:3px 0 0 3px;background:#2c2c2a}
.reel-uno .reel-toggle{right:9%;bottom:4.6%;z-index:3;border-radius:50%}
.reel-uno .reel-meta{padding-inline:4%}
@media(max-width:860px){.reels--uno{grid-template-columns:minmax(0,1fr)}.reel-uno .reel{max-width:280px}}

/* ---------- 21. fila de 6 iPhone: 3 por fila en escritorio, 2 por fila en móvil (sin deslizamiento) ---------- */
.vrow{row-gap:clamp(40px,5vw,72px)}
@media(max-width:620px){
  .vrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 14px;overflow:visible;padding:0;margin-inline:0}
  .vrow .reel{flex:none;max-width:none}
  .vrow .reel-meta{flex-direction:column;gap:2px}
  .vrow .reel-meta h3{font-size:13px}
  .vrow .reel-ph{font-size:10px;padding:8%}
}

/* ---------- 22. cabecera sin fotos: etiquetas bajo la frase, alineadas a la izquierda (21/10/2026) ---------- */
.svc-hero--bare .svc-hero-foot{grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,22px)}

/* ---------- 23. panel: la <picture> de las cards (versión móvil aparte) no cambia la maqueta ---------- */
.card-media picture{display:contents}

/* ---------- 24. cierre de la home: eslogan en negro sobre naranja (23/10/2026) ---------- */
.cierre{padding-block:clamp(96px,14vw,220px)}
.cierre-claim{font-size:clamp(44px,11vw,190px);line-height:.88;text-align:center;color:var(--carbon)}

/* ---------- 25. móvil: eslogan del cierre más grande y, en Filmmaking, el reel del caso antes del título (23/10/2026) ---------- */
@media(max-width:620px){.cierre .cierre-claim{font-size:15vw;line-height:.9}}
@media(max-width:860px){.reels--uno .reel-uno{order:-1;margin-bottom:8px}}
/* con 4 puntos en «Qué incluye»: 4 columnas en escritorio, 2×2 en tablet (sin hueco suelto) */
.piezas:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.piezas:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.piezas:has(> li:nth-child(4):last-child){grid-template-columns:1fr}}

/* ---------- 26. titular de servicio: nunca más ancho que la pantalla (la palabra más larga, PRESENCIA, mide ~7,64 em) ---------- */
.svc-hero .hero-h{font-size:min(var(--fs-h1),calc((100vw - 2 * var(--edge)) / 8))}
/* fila de 3 trabajos en móvil (2 por fila): el tercero, centrado y del mismo tamaño */
@media(max-width:620px){.vrow:has(> .reel:nth-child(3):last-child) > .reel:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}}

/* ---------- 27. titulares: cada línea sube desde una máscara, 0,2 s entre líneas (ritmo del reel del hero) ---------- */
.ln{display:block;overflow:hidden;padding:.12em 0 .08em;margin:-.12em 0 -.08em}
.js .ln>span{display:block;transform:translateY(108%);transition:transform .95s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i) * .2s)}
.js .is-in .ln>span{transform:none}

/* ---------- 28. Trabajo: cada caso con la cabecera a pantalla completa (degradado, nombre a la izquierda y texto a la derecha) y su galería ---------- */
.t-psd{padding-top:0}
.t-psd>.wrap{margin-top:clamp(12px,1.6vw,24px)}
.on-hueso .t-bleed{color:var(--hueso)}
.on-hueso .t-bleed .t-head h2,.on-hueso .t-bleed .t-head .lede{color:var(--hueso)}
.on-hueso .t-bleed .tags li{border-color:var(--line-d);color:var(--hueso)}
.pg{position:relative}
.pg-m{display:none}
.pg-c{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h)}
.pg-c img{width:100%;height:100%;object-fit:cover}
.pg .frame--claro{background:#fff}
.pg .frame--claro img,.pg img.pg-contain{object-fit:contain;padding:0}
@media(max-width:700px){
  .pg{aspect-ratio:auto!important;display:flex;flex-wrap:wrap;gap:8px}
  .pg-c{position:static;width:100%;height:auto;aspect-ratio:var(--ar)}
  .pg:has(+ .pg-m){display:none}
  .pg-m{display:flex;flex-direction:column;gap:8px}
  .pg-m img{width:100%;height:100%;object-fit:cover}
  .pg-m .frame--claro{background:#fff}
  .pg-m img.pg-contain{object-fit:contain;padding:0}
  .pg .frame--claro img{object-fit:cover}
}

/* ---------- 29. Creación de contenido y Para agencias (prompt maestro, 26/10/2026) ---------- */
.cc-hero .hero-h{font-size:clamp(36px,5.4vw,88px);line-height:1.02;max-width:17ch}
.cc-hero .acento{color:var(--brasa)}
.cc-sub{margin-top:clamp(24px,3vw,40px);max-width:58ch;font-size:clamp(17px,1.5vw,21px);color:var(--hueso-70)}
.cc-ctas{margin-top:clamp(24px,3vw,36px)}
.cc-nota{margin-top:16px;font-size:13px;color:var(--cromo);max-width:60ch}
.on-hueso .cc-nota{color:var(--carbon-70)}
.cc-caso-t{margin:18px 0 18px;max-width:16ch}
.cc-caso-p{color:var(--hueso-70);max-width:52ch;margin-bottom:clamp(28px,4vw,48px)}
.cc-caso2{margin-top:clamp(56px,8vw,120px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-d)}
.cc-caso2 .kpis{margin-top:18px}
.cc-intro{margin-top:16px;max-width:60ch;font-size:clamp(17px,1.4vw,20px);color:var(--hueso-70)}
.on-hueso .cc-intro{color:var(--carbon-70)}
/* listas pensadas para fondo claro, en oscuro */
.cc-oscuro .suena-grid,.cc-oscuro .steps{border-top-color:var(--hueso)}
.cc-oscuro .suena-grid li+li,.cc-oscuro .steps li+li{border-left-color:var(--line-d)}
.cc-oscuro .suena-grid .n,.cc-oscuro .steps .n{color:var(--brasa)}
.cc-oscuro .suena-grid p,.cc-oscuro .steps p{color:var(--hueso-70)}
/* qué incluye en claro, 2 × 2 */
.on-hueso .piezas{border-color:var(--line-l)}
.on-hueso .piezas li{border-color:var(--line-l)}
.on-hueso .piezas .n{color:var(--carbon-70)}
.on-hueso .piezas p{color:var(--carbon-70)}
.piezas--2x2:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* paquetes */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);align-items:stretch}
.pack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(24px,2.6vw,40px);border:1px solid var(--line-l);background:color-mix(in srgb, #fff 35%, var(--hueso))}
.pack--dest{border:2px solid var(--brasa)}
.pack-tag{position:absolute;top:0;right:clamp(24px,2.6vw,40px);transform:translateY(-50%);background:var(--brasa);color:var(--carbon);font-size:12px;padding:5px 10px}
.pack h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(21px,1.9vw,30px);line-height:1}
.pack-precio{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:13px;color:var(--carbon-70)}
.pack-precio b{font-family:var(--sans,inherit);font-stretch:125%;font-weight:900;font-size:clamp(36px,3.4vw,52px);line-height:1;letter-spacing:-.02em;color:var(--carbon)}
.pack-para,.pack-ideal{font-size:15.5px;color:var(--carbon-70)}
.pack-para b,.pack-ideal b{color:var(--carbon);font-weight:600}
.pack-inc{display:grid;gap:8px;width:100%;padding:14px 0;border-block:1px solid var(--line-l)}
.pack-inc li{position:relative;padding-left:20px;font-size:15.5px;color:var(--carbon)}
.pack-inc li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--carbon)}
.pack .btn{margin-top:auto}
.packs-nota{margin-top:clamp(20px,2.4vw,32px);font-size:13px;color:var(--carbon-70)}
/* agencias y cierre */
.cc-agencias{border-color:var(--cromo)}
.cc-cierre h2{font-size:clamp(34px,5vw,80px);max-width:14ch}
.cc-cierre .ctas{margin-top:clamp(24px,3vw,36px)}
.cc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.cc-img{aspect-ratio:4/3}
.cc-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:980px){.packs{grid-template-columns:1fr}.pack-tag{right:24px}}
@media(max-width:860px){.cc-split{grid-template-columns:1fr}}
@media(max-width:620px){.piezas--2x2:has(> li:nth-child(4):last-child){grid-template-columns:1fr}}
.cc-hero{padding-bottom:clamp(48px,6vw,96px)}

/* ---------- 30. Diseño web (prompt maestro, 26/10/2026) ---------- */
.cc-hero--web .hero-h .mask:first-child{margin-bottom:.06em}
.cc-sec-pegada{padding-top:0}
.pack-sub{font-size:13px;color:var(--carbon-70);margin-top:-6px}
.pack .pack-precio{margin-top:auto}
.pack .pack-precio+.btn{margin-top:0}
.lh-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(28px,4vw,48px)}
.lh-scores .kpi strong{font-size:clamp(34px,3.2vw,52px)}
.mant{display:grid;gap:clamp(24px,3vw,40px);padding:clamp(26px,4vw,56px);border:1px solid var(--line-d)}
.mant-planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-d)}
.mant-planes li{padding:22px 24px 0 0}
.mant-planes li+li{padding-left:24px;border-left:1px solid var(--line-d)}
.mant-planes h3{font-size:clamp(18px,1.5vw,22px);font-weight:700;line-height:1.1}
.mant-precio{display:flex;align-items:baseline;gap:6px;margin:10px 0 10px;font-family:var(--mono);font-size:13px;color:var(--cromo)}
.mant-precio b{font-family:var(--sans);font-stretch:125%;font-weight:900;font-size:clamp(26px,2.4vw,36px);line-height:1;color:var(--hueso)}
.mant-planes p:last-child{color:var(--hueso-70);font-size:15.5px}
@media(max-width:860px){.mant-planes{grid-template-columns:1fr}.mant-planes li,.mant-planes li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--line-d)}.lh-scores{grid-template-columns:1fr 1fr}}

/* ---------- 31. Identidad visual (prompt maestro, 26/10/2026) ---------- */
.cc-hero--largo .hero-h{font-size:clamp(32px,4.4vw,72px);max-width:22ch}
.iv-casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.iv-caso{display:flex;flex-direction:column;gap:12px}
.iv-caso .frame{aspect-ratio:4/3}
.iv-caso img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.iv-caso:hover img{transform:scale(1.04)}
.iv-caso h3{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(20px,1.9vw,28px);line-height:1;transition:color .25s}
.iv-caso:hover h3{color:var(--brasa)}
.iv-caso .mono{color:var(--cromo)}
.iv-nota{margin-top:clamp(28px,4vw,48px)}
#prueba .ctas{margin-top:16px}
.on-hueso .porque-list .n{color:var(--carbon-70)}
.cc-cierre:not(.on-hueso) .cc-intro{color:var(--hueso-70)}
@media(max-width:860px){.iv-casos{grid-template-columns:1fr}}
.cc-cierre--linea{padding-top:0}
.cc-cierre--linea .wrap{border-top:1px solid var(--line-l);padding-top:clamp(48px,6vw,96px)}
.menu-list .menu-row:nth-child(4):last-child{background:var(--hueso);color:var(--carbon)}

/* ---------- 32. Presencia digital oculta (26/10/2026): la home queda con 3 servicios ---------- */
.cards:has(> .card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:620px){.cards:has(> .card:nth-child(3):last-child){grid-template-columns:1fr}}


/* ---------- 33. SEO (27/10/2026): la etiqueta es el h1 (mismo aspecto que antes) y enlaces entre servicios ---------- */
h1.label{font-weight:inherit}
.cc-cruce{padding-top:0}
.cc-cruce-txt{font-size:clamp(20px,1.9vw,28px);font-weight:600;letter-spacing:-.01em;max-width:36ch;text-wrap:balance}
.cc-cruce-txt .link-u{white-space:nowrap;font-size:inherit;font-weight:inherit;letter-spacing:inherit;padding-inline:0;margin-left:0}
@media(max-width:480px){.cc-cruce-txt .link-u{white-space:normal;display:inline}}
/* ---------- movimiento reducido ----------
   Se mantienen las cintas lentas, el ciclo del hero y los fundidos (decisión de José).
   Se quita lo que desplaza o escala contenido: máscaras, entradas con salto y la escena fija de Luka. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mask>span,.hero-word .wm,.hero2-word .wm{animation:none;transform:none}
  .hero2-media{animation:none;opacity:1;transform:none}
  .js [data-reveal],.js .card[data-reveal]{transform:none}
  .luka{height:auto}
  .luka-stage{position:relative}
  .js .claim span{opacity:1;transform:none}
  .duo.side{display:none}
  .duo.main{width:100%;height:100%}
  .duo.main img{transform:none}
  .luka-cap{opacity:1}
}