/* Tipografías alojadas en el sitio (variables, solo alfabeto latino) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/mulish.woff2) format("woff2")}
/* Entrecomillas · opción A (estilo estudio)
   Blanco, grotesca gruesa para titulares, violeta de marca y dorado de acento.
   El lema va literalmente entre comillas. */
:root{
  --white:#FFFFFF;
  --lav:#F5F1FC;
  --lav-2:#EAE2F9;
  --ink:#2B2540;
  --ink-2:#4F4866;
  --muted:#6E6884;
  --line:#E7E2F0;
  --violet:#531AAB;
  --violet-d:#3A0F7E;
  --night:#22094F;
  --lilac:#D8C8FF;
  --gold:#F0B429;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --sans:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --gutter:clamp(20px,4vw,40px);
  --max:1240px;
  --shadow-obj:0 24px 40px -18px rgba(34,9,79,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--violet)}
a:hover{color:var(--night)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
::selection{background:var(--lilac);color:var(--night)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--violet);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:16px}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--night);text-wrap:balance}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:clamp(72px,9vw,112px) 0}
.sec.lav{background:var(--lav)}
.sec.night{background:var(--night);color:#fff}
.sec.night h2,.sec.night h3{color:#fff}
.h2{font-weight:700;font-size:clamp(32px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em}
.h3{font-weight:700;font-size:clamp(22px,2vw,27px);line-height:1.2;letter-spacing:-.01em}
.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.sec-head{margin-bottom:clamp(32px,4vw,44px);display:grid;gap:12px}
.tag{font-size:14px;font-weight:800;color:var(--violet)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:8px;border:0;cursor:pointer;
  background:var(--violet);color:#fff;font-weight:800;font-size:17px;text-decoration:none;transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--violet-d);color:#fff}
.btn:active{transform:scale(.97)}
.btn.light{background:#fff;color:var(--violet)}
.btn.light:hover{background:var(--lav)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.txt-link{font-weight:700;font-size:17px;color:var(--violet)}

/* cabecera */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .3s var(--ease)}
.top.scrolled{box-shadow:0 1px 0 var(--line)}
.top-bar{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:96px;display:flex;align-items:center;gap:30px}
.top-logo{margin-right:auto}
.top-logo img{height:50px;width:auto}
.top-nav{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.top-nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;padding:8px 0;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
.top-nav a:hover,.top-nav a[aria-current="page"]{color:var(--violet);border-color:var(--violet)}
.burger{display:none;width:48px;height:48px;border-radius:8px;border:0;background:var(--lav);cursor:pointer;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:2px;background:var(--violet);border-radius:2px;transition:transform .4s var(--ease)}
.burger span:nth-child(1){top:19px}.burger span:nth-child(2){top:27px}
.menu-open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.overlay{position:fixed;inset:96px 0 0 0;z-index:55;background:#fff;padding:24px var(--gutter);display:none}
.menu-open .overlay{display:block}
.overlay ul{list-style:none;margin:0;padding:0}
.overlay a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:28px;color:var(--night);text-decoration:none}
.overlay p{margin-top:24px;display:grid;gap:8px;font-size:16px}
.overlay p a{font-family:var(--sans);font-size:16px;border:0;padding:0;color:var(--violet)}

/* botón dorado fijo */
.sticker{position:fixed;right:28px;bottom:28px;z-index:50;width:104px;height:104px;border-radius:50%;background:var(--gold);color:var(--night);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;text-decoration:none;transform:rotate(-8deg);
  box-shadow:0 14px 28px -12px rgba(34,9,79,.45);transition:transform .4s var(--ease)}
.sticker:hover{transform:rotate(0) scale(1.05);color:var(--night)}

/* portada de bloques (opción 3) */
.btn.gold{background:var(--gold);color:var(--night)}
.btn.gold:hover{background:#F6C85C;color:var(--night)}
.hero{padding:8px 0 48px}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;min-height:640px}
.blk{position:relative;min-width:0;border-radius:14px;overflow:hidden;transform-origin:center}
.blk-lema{grid-column:span 7;grid-row:span 2;background:var(--night);color:#fff;padding:clamp(28px,4vw,48px) clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.blk-q{position:absolute;right:-10px;top:-70px;font-family:var(--display);font-weight:800;font-size:340px;line-height:1;color:rgba(240,180,41,.18);pointer-events:none}
.kicker{position:relative;font-size:15px;font-weight:800;color:var(--gold)}
.hero-t{position:relative;font-weight:800;font-size:clamp(52px,7.2vw,104px);line-height:.95;letter-spacing:-.045em;color:#fff}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.w > span{display:inline-block}
.hero-cta{position:relative}
.hero-cta .txt-link{color:#fff}
.blk-revista{grid-column:span 3;background:var(--violet);display:flex;align-items:center;justify-content:center}
.blk-revista img{width:150px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:3px;--r:-6deg;transform:rotate(var(--r))}
.blk-anos{grid-column:span 2;background:var(--gold);color:var(--night);padding:22px;display:flex;flex-direction:column;justify-content:flex-end}
.blk-anos .num{font-family:var(--display);font-weight:800;font-size:clamp(56px,6vw,84px);line-height:.9;letter-spacing:-.04em}
.blk-anos .lbl{font-weight:800;font-size:15px;margin-top:8px}
.blk-taza{grid-column:span 2;background:var(--lilac);display:flex;align-items:center;justify-content:center}
.blk-taza img{width:130px;height:130px;object-fit:cover;border-radius:10px;--r:8deg;transform:rotate(var(--r))}
.blk-texto{grid-column:span 3;background:#7A4FD0;color:#fff;padding:22px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.blk-texto img{width:120px;height:120px;object-fit:cover;border-radius:10px;align-self:flex-end;--r:-4deg;transform:rotate(var(--r))}
.blk-texto p{font-size:16px;line-height:1.45}
.pc{box-shadow:0 24px 40px -18px rgba(0,0,0,.55)}

/* secuencia de entrada (solo al cargar) */
@keyframes blkIn{0%{transform:scale(.6) translateY(60px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes wordUp{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes settle{0%{transform:translateY(-40px) rotate(calc(var(--r) - 10deg));opacity:0}100%{transform:translateY(0) rotate(var(--r));opacity:1}}
@keyframes popIn{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.15) rotate(-4deg)}100%{transform:scale(1) rotate(-8deg)}}
.js .blk{animation:blkIn .8s var(--ease) backwards}
.js .blk-lema{animation-delay:.05s}.js .blk-revista{animation-delay:.2s}.js .blk-anos{animation-delay:.3s}.js .blk-taza{animation-delay:.4s}.js .blk-texto{animation-delay:.5s}
.js .kicker{animation:fadeUp .6s ease-out .4s backwards}
.js .w > span{animation:wordUp .9s var(--ease) backwards}
.js .w:nth-of-type(1) > span{animation-delay:.45s}.js .w:nth-of-type(2) > span{animation-delay:.57s}.js .w:nth-of-type(3) > span{animation-delay:.69s}
.js .hero-cta,.js .hero-sub{animation:fadeUp .7s ease-out 1.05s backwards}
.js .pc{animation:settle .9s var(--ease) backwards}
.js .blk-revista img{animation-delay:.9s}.js .blk-taza img{animation-delay:1s}.js .blk-texto img{animation-delay:1.1s}
.js .blk-anos .num{animation:fadeUp .7s var(--ease) 1.1s backwards}.js .blk-anos .lbl{animation:fadeUp .5s ease-out 1.3s backwards}
.js .blk-texto p{animation:fadeUp .6s ease-out 1.3s backwards}
.js .sticker{animation:popIn .7s var(--ease) 1.6s backwards}
.hero-done .hero *,.hero-done .sticker{animation:none!important}
@media (max-width:900px){
  .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;min-height:0}
  .hero-t{font-size:clamp(44px,13vw,60px)}
  .blk-lema{grid-column:span 2;grid-row:auto;min-height:420px}
  .blk-revista,.blk-anos,.blk-taza,.blk-texto{grid-column:span 1;min-height:200px}
  .blk-texto{grid-column:span 2}
  .blk-q{font-size:220px;top:-50px}
}

/* trabajos (grilla con una línea) */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.work{text-decoration:none;color:var(--ink);display:grid;gap:14px;align-content:start}
.work-img{background:var(--lav);border-radius:6px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.work-img img{height:84%;width:auto;max-width:84%;object-fit:contain;border-radius:3px;box-shadow:0 18px 30px -16px rgba(31,24,48,.45);transition:transform .5s var(--ease)}
.work:hover .work-img img{transform:translateY(-6px)}
.work p{font-size:17px;line-height:1.45}
.work small{font-size:14px;color:var(--muted)}
.work:hover{color:var(--ink)}

/* filtros de trabajos */
.filters{display:grid;gap:12px;margin-bottom:40px}
.f-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.f-row > span{font-size:15px;color:var(--muted);width:64px}
.chip{border:0;cursor:pointer;font-size:15px;font-weight:700;min-height:42px;padding:0 16px;border-radius:999px;background:var(--lav);color:var(--ink);transition:background .25s ease,color .25s ease}
.chip[aria-pressed="true"]{background:var(--violet);color:#fff}
.f-count{font-size:15px;color:var(--muted)}
.work[hidden]{display:none}

/* puertas por tipo de cliente */
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.door{background:#fff;border-radius:8px;padding:34px 30px;display:flex;flex-direction:column;gap:18px}
.door h3{color:var(--violet)}
.door p{font-size:17px;line-height:1.55}
.door blockquote{margin:8px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:16px;line-height:1.55;color:var(--ink-2)}
.who{display:flex;gap:12px;align-items:center;margin-top:auto;font-size:14px;line-height:1.35}
.who img{width:44px;height:44px;border-radius:50%;object-fit:cover}

/* casos con gráficas propias */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px}
.case:hover{color:var(--ink)}
.case p{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.g{border-radius:8px;height:300px;position:relative;overflow:hidden;transition:transform .5s var(--ease)}
.case:hover .g{transform:translateY(-4px)}
.g.big{height:clamp(320px,40vw,460px)}
.g-naipes{background:var(--violet);display:flex;align-items:center;justify-content:center}
.cards{position:relative;display:flex;align-items:center;justify-content:center}
.g.big .cards{transform:scale(1.35)}
.g-naipes .card{position:absolute;width:130px;height:182px;background:#fff;border-radius:10px;box-shadow:0 16px 30px -12px rgba(0,0,0,.5);font-family:Georgia,serif;font-size:70px;color:var(--lilac);display:flex;align-items:center;justify-content:center}
.g-naipes .card.l{transform:translateX(-74px) rotate(-14deg)}
.g-naipes .card.r{transform:translateX(74px) rotate(14deg)}
.g-naipes .card.c{position:relative;width:142px;height:198px;padding:18px 14px;flex-direction:column;justify-content:space-between;align-items:stretch;font-family:var(--display);font-size:30px;color:var(--violet)}
.g-naipes .card.c b{font-size:17px;line-height:1.15;color:var(--night)}
.g-naipes .card.c i{font-style:normal;align-self:flex-end;transform:rotate(180deg)}
.g-revista{background:var(--lav-2);display:flex;align-items:flex-end;justify-content:center;padding-bottom:34px}
.g-revista .spines{display:flex;flex-direction:column;gap:5px;width:230px}
.g-revista .spines i{display:block;height:16px;border-radius:2px}
.g-revista .num{position:absolute;top:22px;left:28px;font-family:var(--display);font-weight:800;font-size:120px;line-height:1;color:var(--night);letter-spacing:-.04em}
.g-revista .lbl{position:absolute;top:58px;left:168px;font-size:16px;font-weight:800;color:var(--night);line-height:1.2}
.g.big.g-revista .spines{width:min(420px,70%)}
.g.big.g-revista .spines i{height:24px}
.g.big.g-revista .num{font-size:180px;left:48px;top:30px}
.g.big.g-revista .lbl{left:260px;top:86px;font-size:20px}
.g-canales{background:var(--night)}
.g-canales .hub{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.1;color:var(--night)}
.g-canales .ring{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;border:1.5px dashed rgba(216,200,255,.55)}
.g-canales span{position:absolute;background:#fff;color:var(--night);font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px}
.g-canales .c1{left:50%;top:22px;transform:translateX(-50%)}
.g-canales .c2{left:16%;top:38%}
.g-canales .c3{right:13%;top:36%}
.g-canales .c4{left:13%;bottom:20%}
.g-canales .c5{right:17%;bottom:18%;background:var(--lilac)}
.g.big.g-canales .hub,.g.big.g-canales .ring{transform:scale(1.4)}

/* fundadora */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.founder img{width:100%;max-width:380px;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.founder blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.18;letter-spacing:-.015em}
.founder .by{margin-top:24px;font-size:18px;color:var(--lilac)}
.founder .by b{color:#fff}
.pillars{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;font-size:16px;line-height:1.5;color:#EDE4FF}
.pillars b{display:block;color:#fff;font-size:18px;margin-bottom:4px}

/* logos */
.logos{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:28px;align-items:center}
.logos.all{grid-template-columns:repeat(8,minmax(0,1fr));gap:34px 28px}
.logos.all img{max-height:44px}
.logos img{max-height:40px;width:auto;margin:0 auto;object-fit:contain}
.logo-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.logo-wall div{border:1px solid var(--line);border-radius:8px;aspect-ratio:3/2;display:grid;place-items:center;padding:16px}
.logo-wall img{max-height:46px;width:auto;object-fit:contain}

/* cierre */
.closing h2{font-weight:800;font-size:clamp(34px,4.5vw,56px);line-height:1;letter-spacing:-.03em;max-width:900px}
.closing .btn-row{margin-top:40px}

/* pie */
.foot{background:var(--night);color:var(--lilac);padding:56px 0 40px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start}
.foot img{height:56px;width:auto;margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px}
.foot a{color:var(--lilac);text-decoration:none}
.foot a:hover{color:#fff}
.foot-h{margin:0 0 12px;font-size:15px;font-weight:800;color:#fff}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14px}

/* páginas interiores */
.page-head{padding:clamp(40px,6vw,72px) 0 clamp(40px,5vw,56px)}
.page-head h1{font-weight:800;font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:-.035em;max-width:16ch}
.page-head .lede{margin-top:22px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 26px;display:grid;gap:10px;align-content:start}
.sec.lav .box{border-color:#fff}
.box p{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.steps .box > b{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800}
.deliv{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:15px}
.deliv strong{color:var(--violet)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}

/* servicios: recorrido interactivo */
.j-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.j-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.j-ctrl span{font-size:15px;color:var(--muted);margin-right:6px;white-space:nowrap}
.j-btn{border:0;cursor:pointer;font-weight:800;font-size:15px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--lav);color:var(--night)}
.j-btn:hover{background:var(--lav-2)}
.no-js .j-ctrl,.no-js .j-marker{display:none}
.j-scroll{overflow-x:auto;padding-bottom:6px}
.j-track{position:relative;padding:0 66px;min-width:900px}
.j-stages{position:relative;height:44px}
.j-stage{position:absolute;transform:translateX(-50%);font-weight:800;font-size:15px;padding:7px 14px;border-radius:999px;color:var(--muted);transition:background .4s ease,color .4s ease}
.j-stage.on{background:var(--violet);color:#fff}
.j-line{position:relative;height:112px;margin-top:10px}
.j-base,.j-fill{position:absolute;left:0;right:0;top:31px;height:3px;border-radius:2px;background:var(--line)}
.j-fill{background:var(--violet);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease)}
.j-node{position:absolute;top:0;transform:translateX(-50%);width:132px;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:16px}
.j-dot{width:30px;height:30px;border-radius:50%;border:3px solid #9D93B8;background:#fff;margin-top:17px;transition:background .4s ease,border-color .4s ease}
.j-node.done .j-dot,.j-node.on .j-dot{background:var(--violet);border-color:var(--violet)}
.j-name{font-size:14.5px;line-height:1.25;text-align:center;font-weight:600;color:var(--muted)}
.j-node.on .j-name{font-weight:800;color:var(--night)}
.j-marker{position:absolute;left:0;top:0;width:100%;height:64px;pointer-events:none;transform:translateX(0);transition:transform .8s var(--ease)}
.j-marker i{position:absolute;left:-28px;top:4px;width:56px;height:56px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:normal;font-size:44px;line-height:1;padding-top:14px;box-shadow:0 0 0 8px rgba(83,26,171,.14)}
.j-loop{position:relative;height:44px;margin-top:-14px;border:2px dashed #B49AF0;border-top:0;border-radius:0 0 44px 44px}
.j-loop::before{content:"";position:absolute;left:-9px;top:-12px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid #B49AF0}
.j-loop span{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);background:#fff;padding:0 14px;font-size:14.5px;color:var(--muted);white-space:nowrap}
.j-panels{position:relative;margin-top:64px;min-height:520px}
.j-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.js .j-panel{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none;visibility:hidden;transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .7s var(--ease),visibility 0s linear .5s}
.js .j-panel.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .5s cubic-bezier(.23,1,.32,1),transform .7s var(--ease)}
.no-js .j-panel + .j-panel{margin-top:64px}
.j-panel h2{font-weight:800;font-size:clamp(36px,4vw,48px);line-height:1.02;letter-spacing:-.02em}
.j-hook{margin-top:14px;font-family:var(--display);font-weight:700;font-size:22px;color:var(--violet)}
.j-panel .lede{margin-top:18px;max-width:520px}
.j-take{margin-top:22px;font-size:16px}
.j-panel .btn{margin-top:26px}
.j-vis{background:var(--lav);border-radius:12px;height:460px;display:flex;align-items:center;justify-content:center;gap:20px;position:relative;overflow:hidden}
.j-vis.dark{background:var(--night);flex-direction:column}
.j-vis > img{box-shadow:var(--shadow-obj)}
.diag{background:#fff;border-radius:12px;padding:28px 30px;width:380px;max-width:90%;box-shadow:0 24px 44px -24px rgba(34,9,79,.4)}
.diag p{font-family:var(--display);font-weight:700;font-size:20px;color:var(--night);margin-bottom:20px}
.diag dl{display:grid;grid-template-columns:96px 1fr;gap:14px 12px;align-items:center;margin:0;font-size:14.5px}
.diag dd{margin:0}
.diag dt{color:var(--ink-2);font-weight:700}
.bar{height:14px;border-radius:7px;background:var(--violet);transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.on .bar,.no-js .bar{transform:scaleX(1)}
.diag small{display:block;margin-top:18px;font-size:13px;color:var(--muted)}
.chart{display:flex;align-items:flex-end;gap:16px;height:230px;border-bottom:2px solid rgba(216,200,255,.4);padding:0 12px}
.chart i{width:34px;border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease)}
.on .chart i,.no-js .chart i{transform:scaleY(1)}
.j-vis.dark p{font-family:var(--display);font-weight:700;font-size:20px;color:#fff}
.j-vis.dark small{color:var(--lilac);font-size:13px;margin-top:-10px}
.phone{background:#1B1630;border-radius:30px;padding:8px;box-shadow:var(--shadow-obj)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:23px;background:#fff}
.pill{position:absolute;background:var(--gold);color:var(--night);font-weight:800;font-size:15px;padding:10px 16px;border-radius:999px;transform:rotate(-4deg)}

/* casos: página del caso */
.prose{max-width:740px;margin:0 auto}
.prose .blk{padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--line)}
.prose .blk:first-child{border-top:0;padding-top:0}
.prose .tag{display:block;margin-bottom:10px}
.prose h2{margin-bottom:20px}
.prose p{font-size:18.5px;line-height:1.75;color:var(--ink-2);margin-bottom:18px}
.callout{margin:28px 0;padding:clamp(24px,4vw,36px);border-radius:8px;background:var(--night);color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,28px);line-height:1.3}
.keys{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.keys li{padding:14px 18px;background:var(--lav);border-radius:8px;font-size:16.5px}
.case-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.case-meta span{font-size:14px;font-weight:700;padding:7px 14px;border-radius:999px;background:var(--lav)}
.case-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.case-nav a{display:grid;gap:4px;padding:20px 22px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--night);font-family:var(--display);font-weight:700;font-size:20px}
.case-nav small{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--muted)}
.case-nav a:last-child{text-align:right}

/* testimonios */
.tsts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tst{margin:0;border:1px solid var(--line);border-radius:8px;padding:30px;display:flex;flex-direction:column;gap:20px}
.tst blockquote{margin:0;font-size:17.5px;line-height:1.6}
.sectors{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sectors span{padding:9px 16px;border-radius:999px;background:var(--lav);font-size:15px;font-weight:700}

/* contacto */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.ways{display:grid;gap:10px;margin-top:28px}
.way{display:grid;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink)}
.way small{font-size:13px;font-weight:800;color:var(--muted)}
.way b{font-size:17px}
.way:hover{border-color:var(--violet);color:var(--ink)}
.next{margin-top:36px;padding:0;list-style:none;counter-reset:n;display:grid;gap:14px}
.next li{counter-increment:n;display:grid;grid-template-columns:32px 1fr;gap:12px;font-size:16.5px;color:var(--ink-2)}
.next li::before{content:counter(n);width:32px;height:32px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.next b{color:var(--ink);display:block}
.form{background:var(--lav);border-radius:12px;padding:clamp(24px,4vw,40px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:15px;font-weight:700}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #9D93B8;border-radius:8px;padding:13px 14px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px rgba(83,26,171,.15)}
.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:22px}
.form-foot small{font-size:14px;color:var(--muted)}
.form-msg{margin-top:16px;padding:14px 16px;border-radius:8px;font-size:16px;display:none}
.form-msg.ok{display:block;background:#E7F5EE;color:#175C3E}
.form-msg.err{display:block;background:#FBECEC;color:#8A2A2A}
.hp{position:absolute;left:-9999px}

/* responsive */
@media (max-width:920px){
  .top-nav{display:none}
  .burger{display:block}
}
@media (max-width:1080px){
  .top-nav{gap:22px}
  .logos,.logos.all{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .works,.doors,.cases,.grid-3,.tsts{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .founder,.split,.contact,.j-panel{grid-template-columns:1fr}
  .founder{gap:36px}
  .pillars{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .js .j-panel{position:relative;inset:auto;display:none;opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .js .j-panel.on{display:grid}
  .j-panels{min-height:0}
  .j-vis{height:360px}
  .sticker{width:88px;height:88px;font-size:14px;right:16px;bottom:16px}
}
@media (max-width:600px){
  .grid-4,.fields,.case-nav{grid-template-columns:1fr}
  .case-nav a:last-child{text-align:left}
  .sticker{width:72px;height:72px;font-size:12.5px}
  .j-btn{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== color y gráficas en todo el sitio (mismo lenguaje que los casos) ===== */
.bg-violet{background:var(--violet)}
.bg-night{background:var(--night)}
.bg-gold{background:var(--gold)}
.bg-lilac{background:var(--lilac)}
.bg-lav2{background:var(--lav-2)}
.bg-mid{background:#7A4FD0}

/* trabajos sobre bloques de color con una comilla de fondo */
.work-img{position:relative}
.work-img::before{content:"”";position:absolute;right:16px;top:-24px;font-family:var(--display);font-weight:800;font-size:160px;line-height:1;color:rgba(255,255,255,.16);pointer-events:none}
.work-img img{position:relative}
.works .work:nth-child(6n+1) .work-img{background:var(--violet)}
.works .work:nth-child(6n+2) .work-img{background:var(--lav-2)}
.works .work:nth-child(6n+3) .work-img{background:var(--night)}
.works .work:nth-child(6n+4) .work-img{background:var(--gold)}
.works .work:nth-child(6n+5) .work-img{background:#7A4FD0}
.works .work:nth-child(6n+6) .work-img{background:var(--lilac)}
.works .work:nth-child(6n+2) .work-img::before,.works .work:nth-child(6n+4) .work-img::before,.works .work:nth-child(6n+6) .work-img::before{color:rgba(34,9,79,.12)}
.works .work:nth-child(6n+1) .work-img img,.works .work:nth-child(6n+3) .work-img img,.works .work:nth-child(6n+5) .work-img img{box-shadow:0 22px 36px -14px rgba(0,0,0,.6)}

/* puertas con cabecera de color */
.door{padding:0;overflow:hidden;gap:0}
.door-top{position:relative;min-height:150px;padding:26px 30px 24px;display:flex;align-items:flex-end;overflow:hidden}
.door-top h3{position:relative;color:#fff}
.door-q{position:absolute;right:18px;top:-30px;font-family:var(--display);font-weight:800;font-size:170px;line-height:1;color:rgba(255,255,255,.18)}
.door-top.bg-gold h3{color:var(--night)}
.door-top.bg-gold .door-q{color:rgba(34,9,79,.15)}
.door-body{padding:26px 30px 30px;display:flex;flex-direction:column;gap:18px;flex:1}

/* recorrido en miniatura (portada) */
.mini-j{background:var(--night);border-radius:12px;padding:34px 30px 30px;color:#fff;position:relative;overflow:hidden}
.mini-j::after{content:"”";position:absolute;right:18px;top:-36px;font-family:var(--display);font-weight:800;font-size:200px;line-height:1;color:rgba(255,255,255,.08)}
.mini-stages{display:grid;grid-template-columns:1fr 2fr 3fr 1fr;font-size:13px;font-weight:800;color:var(--lilac);margin-bottom:14px}
.mini-stages span:last-child{text-align:right}
.mini-line{position:relative;display:flex;justify-content:space-between;align-items:center;height:30px}
.mini-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:rgba(216,200,255,.35)}
.mini-line i{position:relative;width:22px;height:22px;border-radius:50%;background:var(--violet);border:3px solid var(--night);box-shadow:0 0 0 2px var(--lilac)}
.mini-line i:first-child{background:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.mini-names{display:flex;justify-content:space-between;margin-top:12px;font-size:12.5px;color:#EDE4FF;gap:6px}
.mini-names span{flex:1;text-align:center}
.mini-names span:first-child{text-align:left}.mini-names span:last-child{text-align:right}
.mini-loop{margin-top:16px;height:28px;border:2px dashed rgba(216,200,255,.5);border-top:0;border-radius:0 0 28px 28px}

/* títulos de página con panel gráfico */
.page-head.has-art .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.ph-art{position:relative;height:320px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ph-art .qq{position:absolute;font-family:var(--display);font-weight:800;line-height:1;pointer-events:none}
.ph-art img{position:absolute;box-shadow:0 22px 36px -14px rgba(0,0,0,.55)}
.ph-big{font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.04em}
.ph-loop{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ph-loop span{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;text-align:center}

/* corrección: el texto del centro cabe en el círculo */
.g-canales .hub{width:124px;height:124px;margin:-62px 0 0 -62px;font-size:16px;padding:0 10px}

@media (max-width:900px){
  .page-head.has-art .wrap{grid-template-columns:1fr}
  .ph-art{height:240px}
}

/* trabajos: mosaico de bloques (mismo lenguaje que la portada) */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(300px,auto);gap:14px}
.mz{grid-column:span var(--sp);position:relative;min-width:0;border-radius:14px;overflow:hidden;color:#fff;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;transition:transform .5s var(--ease)}
.mz:hover{transform:translateY(-4px)}
.mz.on-light{color:var(--night)}
.mz-q{position:absolute;right:-6px;top:-60px;font-family:var(--display);font-weight:800;font-size:220px;line-height:1;color:rgba(255,255,255,.16);pointer-events:none}
.mz.on-light .mz-q{color:rgba(34,9,79,.12)}
.mz img{position:relative;align-self:center;max-height:190px;width:auto;max-width:70%;object-fit:contain;border-radius:4px;--r:-4deg;transform:rotate(var(--r))}
.mz:nth-child(even) img{--r:4deg}
.mz-txt{position:relative;font-size:15.5px;line-height:1.45}
.mz-txt b{font-weight:800}
.mz-txt small{display:block;margin-top:6px;font-size:12.5px;font-weight:800;opacity:.92}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(260px,auto)}.mz{grid-column:span 1}.mz:nth-child(5n+1){grid-column:span 2}}
@media (max-width:600px){.mosaic{grid-template-columns:1fr}.mz,.mz:nth-child(5n+1){grid-column:span 1}}

/* servicios: cada paso aparece como un mosaico, con la entrada de la portada */
.j-mosaic{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:460px}
.jb{position:relative;min-width:0;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}
.jb.big{grid-row:span 2}
.jb .mz-q{font-size:200px;top:-50px;right:-6px}
.jb .mz-q.big{position:static;font-size:150px;line-height:.8;margin-top:40px;color:rgba(34,9,79,.18)}
.jb.bg-violet .mz-q.big{color:rgba(255,255,255,.22)}
.jb.num{flex-direction:column;color:var(--night);gap:2px}
.jb.num b{font-family:var(--display);font-weight:800;font-size:64px;line-height:.9;letter-spacing:-.04em}
.jb.num span{font-weight:800;font-size:14px}
.jb img.pc{position:relative;object-fit:cover;border-radius:6px;transform:rotate(var(--r))}
.jb .diag{position:relative;width:320px;max-width:86%;padding:22px 24px}
.jb .diag p{margin-bottom:14px;font-size:18px}
.jb.dark{flex-direction:column;gap:14px}
.jb.dark .chart{height:200px}
.jb.dark p{font-family:var(--display);font-weight:700;font-size:18px}
.jb.dark small{font-size:12px;color:var(--lilac);margin-top:-8px}
.jb .phone{position:relative;transform:rotate(var(--r))}
.js .j-panel.on .jb{animation:blkIn .7s var(--ease) backwards}
.js .j-panel.on .jb.big{animation-delay:.05s}.js .j-panel.on .jb:nth-child(2){animation-delay:.2s}.js .j-panel.on .jb:nth-child(3){animation-delay:.35s}
.js .j-panel.on .pc{animation:settle .8s var(--ease) .6s backwards}
.js .j-panel.on .jb.num b{animation:fadeUp .7s var(--ease) .7s backwards}
.js .j-panel.on .tag{animation:fadeUp .6s ease-out .1s backwards}
.js .j-panel.on h2 .w > span{animation:wordUp .8s var(--ease) backwards}
.js .j-panel.on h2 .w:nth-of-type(1) > span{animation-delay:.2s}.js .j-panel.on h2 .w:nth-of-type(2) > span{animation-delay:.3s}.js .j-panel.on h2 .w:nth-of-type(3) > span{animation-delay:.4s}.js .j-panel.on h2 .w:nth-of-type(4) > span{animation-delay:.5s}
.js .j-panel.on .j-hook,.js .j-panel.on .lede,.js .j-panel.on .j-take,.js .j-panel.on .btn{animation:fadeUp .7s ease-out .55s backwards}
.js .j-panel.on .lede{animation-delay:.7s}.js .j-panel.on .j-take{animation-delay:.85s}.js .j-panel.on .btn{animation-delay:1s}
.j-marker i{background:var(--gold);color:var(--night);box-shadow:0 0 0 8px rgba(240,180,41,.22)}
.j-stage.on{background:var(--night)}
@media (max-width:900px){.j-mosaic{height:auto;grid-template-rows:auto;grid-template-columns:1fr 1fr}.jb.big{grid-column:span 2;min-height:300px}.jb{min-height:150px}.jb .mz-q.big{margin-top:10px;font-size:110px}}

/* ===== aparición al hacer scroll + sello dorado con comilla ===== */
.qmark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--night);font-family:Georgia,serif;font-size:44px;line-height:1;padding-top:14px;box-sizing:border-box;box-shadow:0 0 0 8px rgba(240,180,41,.22);margin-bottom:18px}
.qmark.sm{width:40px;height:40px;font-size:30px;padding-top:10px;margin-bottom:12px;box-shadow:0 0 0 6px rgba(240,180,41,.22)}
.js .rv{opacity:0}
.js .rv.in{opacity:1}
.js .rv.in .qmark{animation:popIn .7s var(--ease) backwards}
.js .rv.in .blk,.js .rv.in .mz,.js .rv.in .jb,.js .rv.in .door,.js .rv.in .g{animation:blkIn .7s var(--ease) backwards}
.js .rv.in .pc{animation:settle .8s var(--ease) .5s backwards}
.js .rv.in > .h2,.js .rv.in > h2,.js .rv.in > .lede,.js .rv.in > p,.js .rv.in .sec-head{animation:fadeUp .7s ease-out .15s backwards}
.js .rv.in .st1{animation-delay:.1s}.js .rv.in .st2{animation-delay:.25s}.js .rv.in .st3{animation-delay:.4s}.js .rv.in .st4{animation-delay:.55s}.js .rv.in .st5{animation-delay:.7s}.js .rv.in .st6{animation-delay:.85s}
.js .rv.in .logos img,.js .rv.in .logo-wall div{animation:fadeUp .6s ease-out backwards}
.js .rv.in .logos img:nth-child(n),.js .rv.in .logo-wall div:nth-child(n){animation-delay:calc(var(--i, 0) * 45ms)}
@keyframes popIn{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}

/* casos: gráfica grande animada */
.js .rv.in .g-naipes .card.l{animation:settleL .9s var(--ease) .3s backwards}
.js .rv.in .g-naipes .card.r{animation:settleR .9s var(--ease) .45s backwards}
.js .rv.in .g-naipes .card.c{animation:settleC .9s var(--ease) .6s backwards}
@keyframes settleL{from{transform:translate(-74px,-80px) rotate(-30deg);opacity:0}to{transform:translateX(-74px) rotate(-14deg);opacity:1}}
@keyframes settleR{from{transform:translate(74px,-80px) rotate(30deg);opacity:0}to{transform:translateX(74px) rotate(14deg);opacity:1}}
@keyframes settleC{from{transform:translateY(-80px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.g-revista .spines i{transform-origin:left}
.js .rv.in .g-revista .spines i{animation:growX .8s var(--ease) backwards}
.js .rv.in .g-revista .spines i:nth-child(n){animation-delay:calc(.3s + var(--i,0) * 90ms)}
.js .rv.in .g-revista .num{animation:fadeUp .8s var(--ease) .9s backwards}
.js .rv.in .g-revista .lbl{animation:fadeUp .6s ease-out 1.1s backwards}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .rv.in .g-canales .hub{animation:popHub .8s var(--ease) .3s backwards}
.js .rv.in .g-canales .ring{animation:fadeUp 1s ease-out .6s backwards}
.js .rv.in .g-canales span{animation:popChip .6s var(--ease) backwards}
.js .rv.in .g-canales .c1{animation-delay:.8s}.js .rv.in .g-canales .c2{animation-delay:.95s}.js .rv.in .g-canales .c3{animation-delay:1.1s}.js .rv.in .g-canales .c4{animation-delay:1.25s}.js .rv.in .g-canales .c5{animation-delay:1.4s}
@keyframes popHub{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes popChip{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
.g.big.g-canales .hub{animation-name:popHubBig!important}
@keyframes popHubBig{0%{transform:scale(0)}70%{transform:scale(1.5)}100%{transform:scale(1.4)}}
.js .rv.in .g-canales .c1{transform:translateX(-50%)}
@keyframes popChip1{0%{transform:translateX(-50%) scale(0);opacity:0}70%{transform:translateX(-50%) scale(1.12);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
.js .rv.in .g-canales .c1{animation-name:popChip1}

/* bloques genéricos para secciones interiores */
.mosaic2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.mz.span3{--sp:3}.mz.span4{--sp:4}.mz.span5{--sp:5}.mz.span6{--sp:6}.mz.span7{--sp:7}.mz.span8{--sp:8}.mz.span12{--sp:12}
.mz.text{justify-content:flex-start;gap:14px;min-height:240px}
.mz.text h3{color:inherit}
.mz.text p{position:relative;font-size:16.5px;line-height:1.5}
.mz.center{align-items:center;justify-content:center;text-align:center}
.mz .ph-big{position:relative;font-size:clamp(64px,8vw,120px)}
.mz .step-n{position:relative;font-family:var(--display);font-weight:800;font-size:72px;line-height:.9;letter-spacing:-.04em}
.mz.on-light .btn{background:var(--night);color:#fff}
.mz img.portrait{position:relative;width:100%;height:100%;object-fit:cover;border-radius:0;margin:-26px;width:calc(100% + 52px);height:calc(100% + 52px);max-height:none;max-width:none;transform:none}
.door.mz{padding:26px}
.door.mz .door-top{display:none}
.door.mz blockquote{border-color:rgba(255,255,255,.25);color:inherit;opacity:.92}
.door.mz.on-light blockquote{border-color:rgba(34,9,79,.2)}
.door.mz .who img{box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.tst.mz{border:0;padding:30px;gap:20px}
.tst.mz blockquote{position:relative;font-size:17px}
.tst.mz .who{position:relative}
@media (max-width:900px){.mosaic2{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaic2 .mz{grid-column:span 1}.mosaic2 .mz.span7,.mosaic2 .mz.span8,.mosaic2 .mz.span12,.mosaic2 .mz.wide{grid-column:span 2}}
@media (max-width:600px){.mosaic2{grid-template-columns:1fr}.mosaic2 .mz,.mosaic2 .mz.span7,.mosaic2 .mz.span8,.mosaic2 .mz.span12,.mosaic2 .mz.wide{grid-column:span 1}}
/* casos en lectura: cada bloque entra al llegar */
.js .prose .blk.rv.in h2,.js .prose .blk.rv.in p{animation:fadeUp .7s ease-out .2s backwards}
.js .prose .blk.rv.in p{animation-delay:.35s}
.js .callout.rv.in{animation:blkIn .7s var(--ease) backwards}
.js .keys.rv.in li{animation:fadeUp .6s ease-out backwards}
.js .keys.rv.in li:nth-child(1){animation-delay:.1s}.js .keys.rv.in li:nth-child(2){animation-delay:.25s}.js .keys.rv.in li:nth-child(3){animation-delay:.4s}.js .keys.rv.in li:nth-child(4){animation-delay:.55s}
.js .case-nav.rv.in a{animation:fadeUp .6s ease-out .1s backwards}
.js .rv.in .mz:nth-child(n){animation-delay:calc(var(--k,0) * 70ms)}
.page-head .qmark{display:inline-flex}
.mz.text .step-n{color:inherit}
.mz.text small,.mz.text b{display:block}

/* ===== Ajustes de la revisión (oct 2026) ===== */
/* foco de teclado visible también sobre los fondos de marca */
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.blk-lema :focus-visible,.sec.night :focus-visible,.foot :focus-visible,.overlay :focus-visible,
.mz:not(.on-light):focus-visible,.mz:not(.on-light) :focus-visible,.btn:focus-visible,.j-marker:focus-visible{outline-color:var(--gold)}
/* áreas táctiles de al menos 24 px */
.txt-link,.foot a,.crumbs a{display:inline-block;padding:6px 0}
/* botón «Hablemos»: se aparta cuando el cierre o el pie ya ofrecen el contacto; no aparece en Contacto ni en celular */
.sticker{transition:transform .4s var(--ease),opacity .3s ease}
.sticker.away{opacity:0;transform:rotate(-8deg) scale(.6);pointer-events:none}
.p-contacto .sticker{display:none}
@media (max-width:600px){.sticker{display:none}}
/* bajada concreta bajo el lema */
.hero-sub{position:relative;margin:-6px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#E3D8FF;max-width:40ch}
/* comillas de fondo: solo en los bloques oscuros, para no saturar el motivo */
.mz.on-light > .mz-q,.mz.bg-mid > .mz-q,.mz.bg-lilac > .mz-q,.mz.bg-gold > .mz-q,.jb.bg-gold > .mz-q,.jb.bg-lilac > .mz-q:not(.big),.jb.bg-mid > .mz-q{display:none}
/* datos clave en los bloques chicos de Servicios */
.jb.facts{align-items:flex-start;justify-content:flex-end;flex-direction:column;gap:8px;padding:22px;text-align:left}
.jb.facts.on-light{color:var(--night)}
.jb.facts small{font-weight:800;font-size:13px;opacity:.85}
.jb.facts ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:700;font-size:15px;line-height:1.3}
/* franja de marcas en movimiento bajo la portada */
.marquee{padding:clamp(32px,4.5vw,56px) 0;border-bottom:1px solid var(--lav-2);overflow:hidden}
.marquee-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.marquee-head .btn-line{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:2px solid var(--violet);border-radius:999px;font-weight:800;font-size:15.5px;color:var(--violet);text-decoration:none;transition:background .25s,color .25s}
.marquee-head .btn-line:hover{background:var(--violet);color:#fff}
.marquee-band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-head h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(20px,2vw,26px);color:var(--night);letter-spacing:-.01em}
.marquee-track{display:flex;width:max-content;gap:48px;align-items:center;animation:marq 80s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-track img{height:60px;width:160px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:28px 40px}.marquee-track [aria-hidden]{display:none}}
/* cierre de cada caso */
.case-cta{margin-top:clamp(36px,5vw,56px);background:var(--night);color:#fff;border-radius:14px;padding:clamp(28px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.case-cta p{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.15;max-width:28ch;position:relative}
.case-cta .btn{position:relative}
/* Nosotros: cómo trabajamos contigo */
.mz .step-n{position:relative}
/* contacto: dos columnas solo cuando hay espacio */
.contact-mz{grid-template-columns:1fr 1fr}
.contact-mz .wide{grid-column:span 2}
@media (max-width:600px){
  .contact-mz{grid-template-columns:1fr}.contact-mz .wide{grid-column:span 1}
  .contact-mz b{word-break:normal!important;overflow-wrap:anywhere}
  .mini-names{display:none}
  .mini-stages{display:flex;justify-content:space-between}
  .g.big .cards{transform:none}
  /* recorrido de servicios: en celular los 7 servicios se ven como chips */
  .j-scroll{overflow:visible}
  .j-track{min-width:0;padding:0}
  .j-stages,.j-base,.j-fill,.j-marker,.j-track > .j-loop{display:none}
  .j-line{height:auto;margin:0;display:flex;flex-wrap:wrap;gap:8px}
  .j-node{position:static;transform:none;width:auto;flex-direction:row;gap:0;padding:9px 14px;border-radius:999px;background:var(--lav)}
  .j-node .j-dot{display:none}
  .j-node .j-name{font-size:14px;color:var(--night)}
  .j-node.on{background:var(--violet)}
  .j-node.on .j-name{color:#fff}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:600px){.marquee-track{gap:32px}.marquee-track img{height:46px;width:120px}}

/* ===== Fotos recortadas (productos, pendón): objetos reales con sombra propia ===== */
img.obj{box-shadow:none!important;border-radius:0!important;object-fit:contain!important;background:none;
  filter:drop-shadow(0 18px 16px rgba(20,8,40,.34)) drop-shadow(0 3px 5px rgba(20,8,40,.18))}
.blk-taza img.obj{width:82%;height:auto;max-height:78%}
.blk-texto img.obj{width:140px;height:auto}
.work-img img.obj{height:78%;max-width:80%}
.work:hover .work-img img.obj{transform:translateY(-6px) rotate(-2deg)}

/* ===== Nosotros: nuestra historia (fotos de álbum sobre bloques) ===== */
.mz.hist{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:0}
.mz.hist .yr{position:relative;font-family:var(--display);font-weight:800;font-size:clamp(40px,4vw,56px);line-height:.9;letter-spacing:-.03em;color:var(--gold)}
.mz.hist.on-light .yr{color:var(--night)}
.mz.hist img.pc{align-self:center;max-height:240px;max-width:88%;width:auto;border-radius:2px;box-shadow:0 18px 30px -14px rgba(0,0,0,.55)}
.mz.hist figcaption{position:relative;font-size:16px;line-height:1.45;max-width:46ch}
@media (max-width:600px){.mz.hist img.pc{max-height:200px}}

/* ===== Nosotros: el equipo ===== */
.mz.equipo-foto{margin:0;padding:0;min-height:380px;overflow:hidden;position:relative}
.mz.equipo-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 70%;border-radius:0;transform:none}
.mz.equipo-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 18px;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(20,8,40,.75))}
.equipo .mz.text{justify-content:center}
.equipo .mz.text .h2{position:relative;color:#fff;font-size:clamp(30px,3vw,42px);line-height:1.05}
.equipo .mz.text p{position:relative;font-size:17px;line-height:1.55;color:#EDE4FF;margin-top:16px}
@media (max-width:600px){.mz.equipo-foto{min-height:240px}}

/* ===== Nosotros: portada propia (mismo contenido que la home, otras figuras) ===== */
.hero-n .hero-grid{grid-template-rows:minmax(330px,auto) 290px;min-height:0}
.n-lema{grid-column:1/9;grid-row:1;background:var(--night);color:#fff;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.n-lema .hero-t{font-size:clamp(46px,5.6vw,86px)}
.n-bajada{font-size:18px;line-height:1.55;color:#E3D8FF;max-width:56ch}
.n-30{grid-column:9/13;grid-row:1;align-self:center;justify-self:center;width:min(100%,320px);aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.n-30 .num{font-family:var(--display);font-weight:800;font-size:clamp(76px,8vw,120px);line-height:.85;letter-spacing:-.05em}
.n-30 .lbl{font-weight:800;font-size:16px;margin-top:10px}
.n-arco{grid-column:1/4;grid-row:2;background:var(--violet);border-radius:999px 999px 14px 14px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 22px}
.n-arco img{width:min(50%,148px);height:auto;--r:-5deg;transform:rotate(var(--r))}
.n-pildora{grid-column:4/8;grid-row:2;align-self:center;height:66%;border-radius:999px;background:var(--lilac);display:flex;align-items:center;justify-content:center}
.n-pildora img{width:62%;height:auto;--r:3deg;transform:rotate(var(--r))}
.n-texto{grid-column:8/13;grid-row:2;background:#7A4FD0;color:#fff;border-radius:14px 140px 14px 14px;padding:24px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.n-texto img{width:150px;height:auto;align-self:flex-start;--r:-4deg;transform:rotate(var(--r))}
.n-texto p{font-size:16px;line-height:1.45;max-width:34ch}
/* entrada: cada figura con su propio gesto */
@keyframes nGira{0%{transform:scale(.2) rotate(-140deg);opacity:0}70%{transform:scale(1.06) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes nSube{0%{transform:translateY(110px) scaleY(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes nEstira{0%{transform:scaleX(.15);opacity:0}100%{transform:scaleX(1);opacity:1}}
@keyframes nDesliza{0%{transform:translateX(70px);opacity:0}100%{transform:none;opacity:1}}
.js .hero-n .n-lema{animation:nDesliza .8s var(--ease) .05s backwards}
.js .hero-n .n-30{animation:nGira 1s var(--ease) .3s backwards}
.js .hero-n .n-arco{transform-origin:bottom;animation:nSube .8s var(--ease) .45s backwards}
.js .hero-n .n-pildora{transform-origin:left center;animation:nEstira .8s var(--ease) .55s backwards}
.js .hero-n .n-texto{animation:nDesliza .8s var(--ease) .65s backwards}
.js .hero-n .n-arco img{animation-delay:1s}.js .hero-n .n-pildora img{animation-delay:1.1s}.js .hero-n .n-texto img{animation-delay:1.2s}
.js .hero-n .n-30 .num{animation:fadeUp .6s var(--ease) 1s backwards}.js .hero-n .n-30 .lbl{animation:fadeUp .5s ease-out 1.15s backwards}
.js .hero-n .n-texto p{animation:fadeUp .6s ease-out 1.3s backwards}
@media (max-width:900px){
  .hero-n .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
  .n-lema{grid-column:span 2;grid-row:auto}
  .n-30{grid-column:span 1;grid-row:auto;width:100%}
  .n-arco{grid-column:span 1;grid-row:auto;min-height:240px}
  .n-pildora{grid-column:span 2;grid-row:auto;height:150px}
  .n-pildora img{width:auto;height:78%}
  .n-texto{grid-column:span 2;grid-row:auto;border-radius:14px 90px 14px 14px}
}

/* ===== Portada: fila de clientes bajo la portada, en la primera pantalla ===== */
.hero:not(.hero-n){padding-bottom:12px}
.hero:not(.hero-n) .hero-grid{min-height:clamp(480px,calc(100vh - 300px),640px)}
.hero:not(.hero-n) .blk-texto img{width:96px;height:auto}
.hero:not(.hero-n) .blk-texto p{font-size:15px}
.hero-clientes{padding:18px 0 8px}
.hc-wrap{display:flex;align-items:center;gap:28px}
.hc-t{flex:none;width:170px;margin:0;font-family:var(--display);font-weight:800;font-size:21px;line-height:1.15;color:var(--night)}
.hc-fila{list-style:none;margin:0;padding:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hc{display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--lav-2);overflow:hidden;flex:none}
.hc img{display:block;max-width:74%;max-height:56%;width:auto;height:auto;object-fit:contain}
.hc-pill{height:70px;width:140px;border-radius:999px}
.hc-circulo{height:80px;width:80px;border-radius:50%}
.hc-circulo img{max-width:70%;max-height:60%}
.hc-esquina{height:72px;width:116px;border-radius:12px 38px 12px 12px}
.hc-esquina-i{height:72px;width:116px;border-radius:38px 12px 12px 12px}
.hc-arco{height:80px;width:100px;border-radius:999px 999px 12px 12px}
.hc-arco img{margin-top:10px}
.hc-mas{height:80px;width:80px;border-radius:50%;background:var(--gold);border-color:var(--gold)}
.hc-mas a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--night);font-family:var(--display);font-weight:800;font-size:24px;text-decoration:none}
.hc-mas a:hover{background:#F6C85C}
/* entrada al empezar a bajar (o sola a los 2 s) y salida al seguir bajando */
.js .hc{opacity:0;transform:translateY(18px) scale(.55)}
.js .hero-clientes.on .hc{opacity:calc(1 - var(--o,0));transform:translateY(calc(var(--o,0) * -60px)) scale(calc(1 - var(--o,0) * .4)) rotate(calc(var(--o,0) * var(--giro,10deg)));
  transition:transform .6s var(--ease),opacity .45s ease;transition-delay:calc(var(--i) * 70ms)}
.js .hero-clientes.on.quieto .hc{transition:none}
.hc:nth-child(even){--giro:-12deg}
@media (prefers-reduced-motion:reduce){.js .hc,.js .hero-clientes.on .hc{opacity:1;transform:none;transition:none}}
.hc-n6{display:none}
@media (max-width:1359px) and (min-width:1101px){.hc-fila .hc:nth-child(6),.hc-fila .hc:nth-child(8){display:none}.hc-n8{display:none}.hc-n6{display:inline}}
@media (max-width:1100px){.hc-wrap{flex-direction:column;align-items:flex-start;gap:14px}.hc-t{width:auto}.hc-fila{flex-wrap:wrap;justify-content:flex-start;width:100%}}
@media (max-width:600px){.hc-pill{width:120px;height:58px}.hc-esquina,.hc-esquina-i{width:100px;height:62px}.hc-circulo,.hc-mas{width:66px;height:66px}.hc-arco{width:86px;height:68px}.hc-fila{gap:10px}}

/* ===== Portada en 3D: revista que se abre + mosaico con profundidad ===== */
.hero:not(.hero-n) .hero-grid{position:relative;transform:perspective(1600px) rotateX(calc(var(--py,0) * 1.6deg)) rotateY(calc(var(--px,0) * -2.2deg));transition:transform .6s var(--ease);transform-style:flat}
.hero.r3d .blk-revista img{visibility:hidden}
/* cada pieza flota a su propia «altura»: se desplaza distinto al mover el mouse */
.hero:not(.hero-n) .pc{translate:calc(var(--px,0) * var(--z,8) * 1px) calc(var(--py,0) * var(--z,8) * -1px);transition:translate .6s var(--ease)}
.hero:not(.hero-n) .blk-taza .pc{--z:14}
.hero:not(.hero-n) .blk-texto .pc{--z:20}
.hero:not(.hero-n) .blk-anos .num{display:inline-block;translate:calc(var(--px,0) * 6px) calc(var(--py,0) * -6px);transition:translate .6s var(--ease)}
@media (max-width:900px),(prefers-reduced-motion:reduce){.hero:not(.hero-n) .hero-grid{transform:none}.hero.r3d .blk-revista img{visibility:visible}}

/* ===== 3D del sitio (/3d/sitio3d.js): un solo lienzo WebGL por página =====
   El lienzo cubre la ventana, no recibe eventos y dibuja solo dentro de cada elemento data-3d.
   Va bajo la cabecera, el menú y el botón «Hablemos». Sin WebGL, en celular o si falla el CDN, no aparece. */
#sitio3d{position:absolute;left:0;top:0;z-index:3;pointer-events:none;display:block;will-change:transform}
@media (max-width:900px){#sitio3d{display:none}}
/* portada: con la escena 3D el mosaico ya no se inclina (la revista y las comillas siguen al mouse) */
.hero.con3d .hero-grid{transform:none}
/* comillas del lema: en escritorio ocupan su hueco como texto dorado; con 3D se ve la comilla de verdad */
.q3d{display:inline-block;position:relative;width:.86em;height:.7em;vertical-align:baseline}
.q3d i{position:absolute;left:0;right:0;top:-.17em;font-style:normal;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.25em;line-height:1;text-align:center;color:var(--gold)}
.q-abre{margin-right:.12em}
.q-cierra{margin-left:.14em}
.nw{white-space:nowrap}
.hero.listo .q3d i{visibility:hidden}
@media (min-width:901px){body:not(.p3d) .hero:not(.hero-n) .hero-t{font-size:clamp(46px,6.2vw,92px)}}
@media (max-width:900px){body:not(.p3d) .q3d{display:none}body:not(.p3d) .nw{white-space:normal}}
/* casos: con la escena lista, la gráfica HTML queda debajo (sigue siendo el texto accesible y el respaldo) */
.g.listo .cards,.g.listo .spines,.g.listo .ring,.g.listo .hub,.g-canales.listo span{visibility:hidden}

/* ===== Inicio: tarjetas en perspectiva (CSS 3D, sin WebGL) =====
   Entran en profundidad al aparecer; con mouse se inclinan levemente y un brillo sigue al puntero (app.js). */
.tarjetas3d,.works3d{perspective:1400px;perspective-origin:50% 30%}
.works3d .work{perspective:1000px}
.tarjetas3d .door,.works3d .work-img{--rx:0deg;--ry:0deg;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease),box-shadow .4s ease}
.tarjetas3d .door:hover{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px)}
.tarjetas3d .door.encima,.works3d .work-img.encima{transition:transform .15s ease-out,box-shadow .4s ease;box-shadow:0 40px 60px -30px rgba(34,9,79,.55)}
.tarjetas3d .door::after,.works3d .work-img::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(420px circle at var(--bx,50%) var(--by,30%),rgba(255,255,255,.24),rgba(255,255,255,0) 60%);transition:opacity .4s ease}
.tarjetas3d .door.encima::after,.works3d .work-img.encima::after{opacity:1}
@keyframes entra3d{from{opacity:0;transform:translate3d(0,60px,-380px) rotateY(var(--giro,0deg)) rotateX(var(--giroX,12deg))}to{opacity:1;transform:none}}
.js .rv.in .tarjetas3d .door{animation-name:entra3d;animation-duration:1s}
.tarjetas3d .door.st1{--giro:34deg}.tarjetas3d .door.st2{--giroX:26deg}.tarjetas3d .door.st3{--giro:-34deg}
.js .rv.in .works3d .work{animation:entra3d .9s var(--ease) backwards}
.works3d .work:nth-child(3n+1){--giro:18deg}.works3d .work:nth-child(3n){--giro:-18deg}
.js .rv.in .works3d .work:nth-child(2){animation-delay:.12s}.js .rv.in .works3d .work:nth-child(3){animation-delay:.24s}
.js .rv.in .works3d .work:nth-child(4){animation-delay:.18s}.js .rv.in .works3d .work:nth-child(5){animation-delay:.3s}.js .rv.in .works3d .work:nth-child(6){animation-delay:.42s}
@media (prefers-reduced-motion:reduce){.tarjetas3d .door,.works3d .work-img{transform:none!important}.js .rv.in .tarjetas3d .door,.js .rv.in .works3d .work{animation:none}}

/* ===== Inicio: video del método (escuchar → diseñar → activar → medir) ===== */
.proceso{position:relative;border-radius:12px;overflow:hidden;background:var(--night);aspect-ratio:16/9}
.proceso-link{display:block;height:100%}
.proceso-video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proceso-link:hover .proceso-video{transform:scale(1.02)}
.proceso-play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease,color .3s ease}
.proceso-play[hidden]{display:none}
.proceso-play:hover{background:var(--gold);color:var(--night)}
.proceso-play:focus-visible{outline-color:var(--gold)}
.proceso-play .i-pausa,.proceso.corre .proceso-play .i-play{display:none}
.proceso.corre .proceso-play .i-pausa{display:block}