@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/montserrat-extrabold.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--ink:#111;--paper:#f3f1ec;--white:#fff;--purple:#8538e5;--lime:#d8ef44;--copper:#c68346;--line:rgba(17,17,17,.18);--shell:min(1360px,calc(100vw - 80px));--ease:cubic-bezier(.2,.75,.25,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,Arial,sans-serif;line-height:1.5}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}figure,p,h1,h2{margin-top:0}
.skip{position:fixed;left:16px;top:-80px;z-index:99;background:var(--lime);padding:12px 16px;font-weight:800}.skip:focus{top:16px}
.header{height:84px;background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 40px;position:relative;z-index:20;border-bottom:1px solid rgba(255,255,255,.12)}.brand img{width:116px;height:auto}.header nav{display:flex;gap:28px}.header nav a,.status{font-size:9px;letter-spacing:.14em;text-transform:uppercase}.header nav a{padding:8px 0;border-bottom:1px solid transparent}.header nav a:hover,.header nav a:focus-visible,.header nav a.is-active{border-color:var(--lime);color:var(--lime)}.status{justify-self:end;color:#aaa}
.cover{min-height:calc(100svh - 84px);background:var(--ink);color:#fff;padding:80px max(40px,calc((100vw - 1360px)/2)) 48px;display:grid;grid-template-columns:170px 1fr;grid-template-rows:1fr auto;gap:56px;position:relative;overflow:hidden}.cover-kicker{display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(255,255,255,.2);padding-right:28px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#8e888b}.cover-kicker span:nth-child(2){writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-end}.cover-copy{align-self:center;max-width:1100px;position:relative;z-index:2}.eyebrow{font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:26px}.eyebrow.dark{color:var(--purple)}.eyebrow.copper{color:var(--copper)}h1,h2{font-weight:800;letter-spacing:-.065em;line-height:.91}h1{font-size:clamp(64px,10.4vw,164px);margin-bottom:36px}h1 em{font-style:normal;color:var(--purple)}.cover-lead{max-width:760px;font-size:clamp(17px,1.55vw,23px);color:#d1ccce}.scroll-cue{grid-column:2;display:flex;justify-content:space-between;align-items:center;max-width:760px;border-top:1px solid rgba(255,255,255,.28);padding-top:14px;text-transform:uppercase;font-size:9px;letter-spacing:.15em}.scroll-cue span{font-size:20px;color:var(--lime)}.cover-orbit{position:absolute;width:min(44vw,680px);aspect-ratio:1;border:1px solid rgba(216,239,68,.2);border-radius:50%;right:-17%;top:-33%;box-shadow:0 0 0 100px rgba(133,56,229,.025),0 0 0 200px rgba(133,56,229,.02)}
.index{width:var(--shell);margin:auto;padding:clamp(90px,11vw,170px) 0;display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(70px,10vw,150px)}.index-intro h2{font-size:clamp(55px,7vw,108px);margin-bottom:36px}.index-intro>p:last-child{max-width:470px;color:#5a5658}.index-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.index-list a{display:grid;grid-template-columns:48px 1fr auto 30px;align-items:center;gap:18px;padding:26px 4px;border-bottom:1px solid var(--line);transition:padding .25s var(--ease),background .25s var(--ease)}.index-list a:hover,.index-list a:focus-visible{padding-left:18px;background:#fff}.index-list span,.index-list small{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#777}.index-list strong{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.04em}.index-list i{font-style:normal;font-size:24px;color:var(--purple)}
.project{min-height:100vh;padding:clamp(92px,9vw,150px) max(40px,calc((100vw - 1360px)/2));overflow:hidden}.project-heading{display:grid;grid-template-columns:180px minmax(360px,1fr) minmax(300px,.72fr);gap:45px;align-items:end;margin-bottom:70px}.project-heading .eyebrow{align-self:start;margin-top:11px}.project-heading h2{font-size:clamp(68px,8.6vw,138px);margin:0}.project-summary{font-size:clamp(17px,1.55vw,23px);line-height:1.45;margin:0}.scope{grid-column:3;list-style:none;margin:0;padding:22px 0 0;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid currentColor}.scope li{border:1px solid currentColor;border-radius:999px;padding:7px 11px;font-size:8px;letter-spacing:.11em;text-transform:uppercase}.project-benito{background:#17392f;color:#fff}.project-benito h2{color:#f3b61a}.project-cboard{background:#191919;color:#fff}.project-cboard h2{color:var(--copper)}.project-gdf{background:#e9e4db;color:var(--ink)}.project-gdf h2{color:#263c64}
.stage{width:100%;min-height:760px;position:relative;margin:0 auto}.stage::before{content:'';position:absolute;inset:5% 4% 3%;border:1px solid rgba(255,255,255,.15);pointer-events:none}.project-gdf .stage::before{border-color:rgba(17,17,17,.14)}.web-canvas{position:absolute;z-index:3;margin:0;background:#fff;padding:7px;box-shadow:0 35px 100px rgba(0,0,0,.3)}.web-canvas>figcaption{height:31px;background:#f4f3f0;color:#555;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:7px;letter-spacing:.1em;text-transform:uppercase}.web-canvas>img{width:100%;height:auto}.stage-benito .web-canvas{width:min(76%,1040px);left:10%;top:5%}.stage-cboard .web-canvas{width:min(79%,1080px);left:5%;top:8%}.stage-gdf .web-canvas{width:min(78%,1060px);left:5%;top:11%}
.mobile-canvas{position:absolute;z-index:5;margin:0;width:180px;background:#111;border:1px solid #555;border-radius:26px;padding:7px;box-shadow:0 25px 60px rgba(0,0,0,.36)}.mobile-canvas img{width:100%;height:auto;border-radius:19px}.mobile-canvas figcaption,.campaign figcaption,.detail-canvas figcaption{font-size:7px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;font-weight:800}.mobile-canvas figcaption{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap}.mobile-benito{right:5%;top:10%;transform:rotate(2deg)}.campaign{position:absolute;z-index:4;width:190px;margin:0;background:#fff;padding:7px;box-shadow:0 22px 55px rgba(0,0,0,.28)}.campaign img{width:100%;height:auto}.campaign figcaption{color:var(--ink);padding:8px 4px 2px}.campaign-one{left:0;bottom:4%;transform:rotate(-3deg)}.campaign-two{right:1%;bottom:2%;transform:rotate(3deg)}
.cboard-mark{position:absolute;right:1%;top:0;width:120px;height:120px;border:1px solid rgba(198,131,70,.55);border-radius:50%;display:grid;place-items:center;padding:25px}.cboard-mark img{width:100%}.web-cboard>img{height:530px;object-fit:cover;object-position:top}.mobile-cboard{right:2%;bottom:3%;width:176px;transform:rotate(1.4deg);overflow:hidden}.mobile-cboard img{height:500px;object-fit:cover;object-position:top}.detail-canvas{position:absolute;z-index:4;margin:0;background:#fff;padding:7px;box-shadow:0 22px 55px rgba(0,0,0,.3)}.detail-canvas img{width:100%;height:auto}.detail-canvas figcaption{color:var(--ink);padding:8px 4px 2px}.detail-cboard{left:0;bottom:1%;width:250px;transform:rotate(-1.8deg)}.detail-cboard img{height:285px;object-fit:cover;object-position:top}.gdf-logo{position:absolute;z-index:2;right:3%;top:0;width:210px;height:150px;display:grid;place-items:center;padding:20px;border:1px solid rgba(17,17,17,.18);background:rgba(255,255,255,.35)}.gdf-logo img{max-height:100%;object-fit:contain}.detail-gdf{right:2%;bottom:2%;width:220px}.detail-crop{height:390px;overflow:hidden;background:#fff}.detail-crop img{height:100%;width:auto;max-width:none;transform:translateX(-23%)}
.project-note{display:grid;grid-template-columns:180px 1fr;gap:45px;margin-top:58px;padding-top:22px;border-top:1px solid currentColor}.project-note span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}.project-note p{max-width:790px;margin:0;font-size:12px;opacity:.75}.closing{background:var(--purple);color:#fff;padding:clamp(95px,11vw,170px) max(40px,calc((100vw - 1360px)/2))}.closing h2{font-size:clamp(65px,9vw,140px);margin-bottom:65px}.closing-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.35);margin-bottom:75px}.closing-grid p{margin:0;padding:22px;border-right:1px solid rgba(255,255,255,.35);font-size:13px;font-weight:800}.closing-grid p:last-child{border-right:0}.closing>a{display:flex;justify-content:space-between;max-width:420px;border-bottom:1px solid #fff;padding-bottom:10px;text-transform:uppercase;font-size:9px;letter-spacing:.14em}.closing>a span{color:var(--lime);font-size:18px}.footer{min-height:120px;padding:35px 40px;background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:35px}.footer img{width:105px;height:auto}.footer p{margin:0;color:#918b8f;font-size:8px;letter-spacing:.13em;text-transform:uppercase}.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:1100px){:root{--shell:calc(100vw - 48px)}.header{padding:0 24px}.header nav{display:none}.cover{padding-left:24px;padding-right:24px}.index{grid-template-columns:1fr}.index-intro{max-width:690px}.project{padding-left:24px;padding-right:24px}.project-heading{grid-template-columns:130px 1fr}.project-summary,.scope{grid-column:2}.stage{min-height:650px}.stage-benito .web-canvas,.stage-cboard .web-canvas,.stage-gdf .web-canvas{width:82%}.campaign{width:150px}.detail-cboard{width:210px}.mobile-canvas{width:145px}.gdf-logo{width:170px;height:120px}.detail-gdf{width:180px}.detail-crop{height:320px}}
@media (max-width:720px){:root{--shell:calc(100vw - 36px)}html{scroll-padding-top:70px}.header{height:70px;padding:0 18px;grid-template-columns:1fr auto}.brand img{width:94px}.status{font-size:8px}.cover{min-height:calc(100svh - 70px);padding:65px 18px 30px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:35px}.cover-kicker{grid-row:1;flex-direction:row;border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 14px}.cover-kicker span:nth-child(2){display:none}.cover-copy{grid-row:2}.cover-copy h1{font-size:clamp(55px,18vw,82px)}.cover-lead{font-size:16px}.scroll-cue{grid-column:1;grid-row:3}.cover-orbit{width:90vw;right:-50%;top:-10%}.index{padding:82px 0;gap:45px}.index-intro h2{font-size:53px}.index-list a{grid-template-columns:34px 1fr 22px;gap:12px}.index-list small{grid-column:2}.index-list i{grid-column:3;grid-row:1/3}.index-list strong{font-size:22px}.project{padding:78px 18px 88px}.project-heading{display:block;margin-bottom:48px}.project-heading h2{font-size:clamp(55px,16vw,78px);margin-bottom:28px}.project-summary{font-size:17px}.scope{margin-top:30px}.stage{min-height:0;display:grid;grid-template-columns:1fr 100px;gap:14px;align-items:start}.stage::before{display:none}.stage .web-canvas,.mobile-canvas,.campaign,.detail-canvas,.gdf-logo,.cboard-mark{position:relative;inset:auto;transform:none;width:auto;margin:0}.stage .web-canvas{grid-column:1/-1;grid-row:1}.mobile-canvas{grid-column:2;grid-row:2/4;width:100%!important}.campaign{width:100%;padding:4px}.campaign-one{grid-column:1;grid-row:2}.campaign-two{grid-column:1;grid-row:3}.web-canvas>figcaption{height:27px}.campaign figcaption,.detail-canvas figcaption{font-size:6px}.cboard-mark{display:none}.web-cboard>img{height:215px}.mobile-cboard img{height:320px}.detail-cboard{grid-column:1;grid-row:2}.detail-cboard img{height:210px}.stage-cboard{grid-template-columns:1fr 105px}.gdf-logo{grid-column:1/-1;grid-row:2;height:96px;background:#fff;padding:14px}.detail-gdf{grid-column:1/-1;grid-row:3}.detail-crop{height:210px}.detail-crop img{width:100%;height:auto;transform:none}.stage-gdf{grid-template-columns:1fr}.project-note{grid-template-columns:1fr;gap:10px;margin-top:40px}.closing{padding:82px 18px}.closing h2{font-size:56px}.closing-grid{grid-template-columns:1fr 1fr}.closing-grid p{border-bottom:1px solid rgba(255,255,255,.35)}.closing-grid p:nth-child(2){border-right:0}.footer{padding:32px 18px;grid-template-columns:1fr;gap:12px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}
.scene-reference{position:absolute;inset:0;z-index:6;margin:0;display:grid;place-items:center;background:#090909}
.scene-reference img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.scene-reference figcaption{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;gap:18px;padding:11px 14px;border:1px solid rgba(244,239,230,.28);border-radius:999px;background:rgba(11,9,16,.76);color:#f4efe6;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(12px)}
@media (max-width:720px){.stage:has(.scene-reference){display:block;min-height:auto;aspect-ratio:16/10}.scene-reference figcaption{left:10px;right:10px;bottom:10px;padding:8px 10px;font-size:.54rem}.scene-reference figcaption span:last-child{display:none}}

/* Narrativa editorial de casos */
.project-copy{grid-column:3;align-self:end}
.project-tagline{font-size:clamp(21px,2vw,30px);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0 0 18px}
.project-copy .project-summary{font-size:clamp(15px,1.2vw,18px);line-height:1.62;margin:0}
@media (max-width:1100px){.project-copy{grid-column:2}}
@media (max-width:720px){.project-copy{display:block}.project-tagline{font-size:23px;margin-bottom:16px}.project-copy .project-summary{font-size:16px;line-height:1.58}}

/* Sistema cromático Appios */
:root{--ink:#0B0910;--paper:#F4EFE6;--white:#F4EFE6;--purple-deep:#2F0B68;--purple:#4B16A8;--lime:#D7FF24;--line:rgba(11,9,16,.18)}
body{background:var(--paper);color:var(--ink)}
.skip{background:var(--lime);color:var(--purple-deep)}
.header{background:var(--purple-deep);color:var(--paper);border-bottom-color:rgba(244,239,230,.18)}
.header nav a:hover,.header nav a:focus-visible,.header nav a.is-active{border-color:var(--lime);color:var(--lime)}
.status{color:rgba(244,239,230,.7)}
.cover{background:var(--ink);color:var(--paper)}
.cover-kicker{border-right-color:rgba(244,239,230,.2);color:rgba(244,239,230,.62)}
.cover-lead{color:rgba(244,239,230,.82)}
.scroll-cue{border-top-color:rgba(244,239,230,.28)}
.cover-orbit{border-color:rgba(215,255,36,.28);box-shadow:0 0 0 100px rgba(75,22,168,.09),0 0 0 200px rgba(47,11,104,.12)}
.eyebrow.copper,.eyebrow.dark{color:var(--purple)}
.index-intro>p:last-child{color:rgba(11,9,16,.68)}
.index-list a:hover,.index-list a:focus-visible{background:rgba(215,255,36,.22)}
.index-list span,.index-list small{color:rgba(11,9,16,.58)}
.project-benito{background:var(--purple-deep);color:var(--paper)}
.project-benito h2{color:var(--lime)}
.project-cboard{background:var(--paper);color:var(--ink)}
.project-cboard h2,.project-cboard .eyebrow{color:var(--purple)}
.project-gdf{background:var(--purple);color:var(--paper)}
.project-gdf h2,.project-gdf .eyebrow{color:var(--lime)}
.stage::before{border-color:rgba(244,239,230,.18)}
.project-cboard .stage::before{border-color:rgba(75,22,168,.2)}
.gdf-logo{border-color:rgba(244,239,230,.28);background:rgba(244,239,230,.92)}
.closing{background:var(--ink);color:var(--paper)}
.closing h2{color:var(--lime)}
.closing-grid{border-top-color:rgba(244,239,230,.35)}
.closing-grid p{border-right-color:rgba(244,239,230,.35)}
.closing>a{border-bottom-color:var(--paper)}
.footer{background:var(--purple-deep);color:var(--paper)}
.footer p{color:rgba(244,239,230,.68)}
.scene-reference{background:var(--ink)}
@media (max-width:720px){.cover-kicker{border-bottom-color:rgba(244,239,230,.2)}.closing-grid p{border-bottom-color:rgba(244,239,230,.35)}}

/* Portada y jerarquía de casos */
.cover{min-height:min(860px,calc(100svh - 84px));background:
  radial-gradient(circle at 82% 18%,rgba(75,22,168,.38),transparent 34%),
  radial-gradient(circle at 68% 76%,rgba(215,255,36,.08),transparent 26%),
  var(--ink)}
.cover-copy{max-width:1180px}
.cover-copy h1{font-size:clamp(58px,9.4vw,148px)}
.cover-orbit{right:-10%;top:-38%;opacity:.82}
.project{min-height:auto;padding-top:clamp(110px,10vw,160px);padding-bottom:clamp(110px,10vw,160px)}
.project-heading{max-width:1360px;margin-left:auto;margin-right:auto;margin-bottom:54px}
.project-heading h2{font-size:clamp(62px,7.3vw,116px)}
.stage{width:min(1180px,100%);min-height:0;aspect-ratio:16/9;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 34px 90px rgba(11,9,16,.24)}
.stage::before{display:none}
.scene-reference{position:relative;inset:auto;width:100%;height:100%}
.scene-reference img{object-fit:contain}
.project-gdf .scene-reference{background:var(--paper)}
.project-note{max-width:1180px;margin-left:auto;margin-right:auto}
.project-benito,.project-cboard,.project-gdf{border-top:1px solid rgba(244,239,230,.16)}
.project-cboard{border-top-color:rgba(11,9,16,.16)}
@media (max-width:1100px){.project-heading{max-width:1180px}.stage{aspect-ratio:16/10}}
@media (max-width:720px){
  .cover{min-height:calc(100svh - 70px)}
  .cover-copy h1{font-size:clamp(51px,16vw,76px)}
  .project{padding-top:84px;padding-bottom:88px}
  .project-heading h2{font-size:clamp(50px,14vw,70px)}
  .stage,.stage:has(.scene-reference){display:block;min-height:0;aspect-ratio:16/10;border-radius:10px}
  .scene-reference{height:100%}
}

/* Contención de escenas dentro de cada caso. */
.cover{
  min-height:calc(100svh - 84px);
  background:var(--ink);
  isolation:isolate;
}
.cover-copy{max-width:1100px}
.cover-copy h1{font-size:clamp(64px,10.4vw,164px)}
.cover-orbit{right:-17%;top:-33%;opacity:1}
.project{position:relative;isolation:isolate}
.stage{position:relative;isolation:isolate}
.stage > .scene-reference{
  position:relative !important;
  inset:auto !important;
  width:100%;
  height:100%;
  overflow:hidden;
}
@media (max-width:720px){
  .cover{min-height:calc(100svh - 70px)}
  .cover-copy h1{font-size:clamp(55px,18vw,82px)}
}