:root{--paper:#f7f5ed;--ink:#151829;--blue:#243de4;--coral:#ff7059;--line:#c9c8c0;--mono:ui-monospace,Consolas,monospace;--header-offset:92px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,select{cursor:pointer}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
[hidden]{display:none!important}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;z-index:4;top:8px;left:8px;background:var(--paper);padding:12px}
.wrap{width:min(90%,1240px);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:3;background:var(--paper);border-bottom:1px solid var(--line)}
.top{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{font-size:2rem;font-weight:950;line-height:.82;letter-spacing:-.09em;display:inline-flex;flex-wrap:wrap;width:110px}
.brand span{color:var(--blue)}
.brand small{font-family:var(--mono);font-size:.53rem;letter-spacing:.12em;margin-top:6px;width:100%}
nav{display:flex;align-items:center;gap:clamp(12px,3vw,38px);font-size:.88rem;font-weight:700}
nav a:hover,.text-link:hover,.footer a:last-child:hover{text-decoration:underline;text-underline-offset:4px}
.nav-cta{border:1px solid var(--ink);padding:8px 13px;font-size:.88rem;font-weight:750;white-space:nowrap}
.nav-cta:hover{color:white;background:var(--blue);border-color:var(--blue)}
.hero{padding-block:clamp(42px,7vw,102px)}
.hero-water{
  position:relative;
  isolation:isolate;
  overflow:clip;
  display:grid;
  align-items:center;
  min-height:calc(100svh - 70px);
  --visual-position:center 54%;
  --water-wash:linear-gradient(90deg,#f7f5edc9 3%,#f7f5edb3 38%,#f7f5ed38 100%);
}
.hero-water::before,.hero-water::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
}
.hero-water::before{background:url("casos/fondo-agua-flores.jpg") var(--visual-position) / cover no-repeat}
.hero-water::after{background:var(--water-wash)}
.idea-section{max-width:740px;padding-block:clamp(42px,6vw,74px)}
.site-header::after{
  content:"";
  position:absolute;
  inset:auto 0 -1px;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--blue),#805ee6,var(--coral));
  opacity:.8;
}
@media(prefers-reduced-motion:no-preference){
  .hero-water::before{animation:water-arrival 4.5s ease-out both}
}
@keyframes water-arrival{
  from{transform:translate3d(-1.4%,1.8%,0) scale(1.075)}
  to{transform:translate3d(0,0,0) scale(1)}
}
.eyebrow,.section-label{font-family:var(--mono);font-weight:700;letter-spacing:.12em;font-size:.72rem}
.eyebrow{display:flex;gap:9px;align-items:center;margin:0 0 22px}
.eyebrow i{width:9px;height:9px;background:var(--blue);display:inline-block;border-radius:100%}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:.98;letter-spacing:-.065em}
h1{font-size:clamp(3.6rem,7.7vw,8rem);font-weight:900}
h2{font-size:clamp(2.6rem,5.3vw,5.55rem);font-weight:900}
em{color:var(--blue);font-family:Georgia,serif;font-weight:500;letter-spacing:-.075em}
.lead{font-size:clamp(1rem,1.8vw,1.34rem);max-width:420px;margin-block:23px 29px}
.actions{display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;background:var(--blue);color:white;padding:13px 17px;border:1px solid transparent;font-size:.92rem;font-weight:750}
.button:hover{background:#172dbb}
.button:focus-visible{outline-color:var(--ink)}
.text-link{font-size:.88rem;font-weight:750}
.hero-art{min-width:0;border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--paper)}
.explorer-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px}
.explorer-head h2{font-size:1.38rem;letter-spacing:-.045em}
.explorer-head span{font:700 .63rem var(--mono);letter-spacing:.06em;color:var(--blue)}
.explorer-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.explorer-options button{padding:9px 3px;border:0;border-right:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:750;font-size:.76rem}
.explorer-options button:last-child{border-right:0}
.explorer-options button:hover{background:#e5e7ff}
.explorer-options button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.explorer-options button:focus-visible{position:relative;z-index:1;outline-offset:-4px}
.hero-scene{position:relative;overflow:hidden;background:var(--blue);border-block:1px solid var(--ink)}
#explorer-art{display:grid;place-items:center;aspect-ratio:1.8;background-color:var(--tone,var(--blue));background-image:linear-gradient(#15182918 1px,transparent 1px),linear-gradient(90deg,#15182918 1px,transparent 1px);background-size:24px 24px;transition:background-color .3s}
#explorer-art svg{width:78%;height:88%;display:block;filter:drop-shadow(8px 8px 0 var(--ink));animation:scene-in .38s ease-out both}
#explorer-art img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center}
@keyframes scene-in{from{opacity:.25;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.hero-scene video{width:100%;height:100%;object-fit:contain;background:var(--ink);position:absolute;inset:0}
.hero-scene video::cue{background:#151829;color:#fff;font-size:1rem;font-weight:700}
#play-motion,#motion-status{position:absolute;right:12px;bottom:12px;background:var(--paper);color:var(--ink);padding:7px 10px;border:1px solid var(--ink);font-weight:750;font-size:.82rem}
#motion-status{top:12px;bottom:auto;left:12px}
.explorer-detail{padding:14px 16px;display:grid;gap:10px}
.explorer-detail h3{font-size:1.32rem;letter-spacing:-.035em}
.explorer-detail p{font-size:1rem;max-width:62ch}
.explorer-detail a{justify-self:start;color:var(--blue);font-weight:750;font-size:.84rem;text-decoration:underline;text-underline-offset:4px}
.goals,.work,.services,.process,.contact{padding-block:clamp(50px,7vw,100px)}
.visual-bg{
  position:relative;
  isolation:isolate;
  overflow:clip;
}
.visual-bg::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-7%;
  background-image:var(--visual-overlay),var(--visual-image);
  background-size:cover;
  background-position:var(--visual-position,center);
  background-repeat:no-repeat;
  pointer-events:none;
}
.idea-backdrop{
  --visual-image:url("casos/idea-diseno.jpg");
  --visual-overlay:linear-gradient(112deg,#f7f5ed88,#f7f5edee 36%,#f7f5edec 65%,#e5e7ff6b);
  --visual-position:72% 44%;
}
.work-backdrop{
  --visual-image:url("casos/idea-campanas.jpg");
  --visual-overlay:linear-gradient(118deg,#f7f5edfa 10%,#f7f5edf2 46%,#e5e7ffb8);
  --visual-position:72% 36%;
}
.work-backdrop .project-info{background:var(--paper)}
.process-backdrop{
  --visual-image:url("casos/idea-flujos.jpg");
  --visual-overlay:linear-gradient(103deg,#f7f5edfc 10%,#f7f5edea 58%,#e5e7ffc9);
  --visual-position:70% 61%;
}
.footer-backdrop{
  --visual-image:url("casos/fondo-agua-flores.jpg");
  --visual-overlay:linear-gradient(90deg,#f7f5edea,#f7f5edd1);
  --visual-position:center 62%;
}
.goals.visual-bg{
  --visual-image:url("casos/fondo-objetivos.jpg");
  --visual-overlay:linear-gradient(100deg,#151829f5 8%,#151829cf 54%,#151829ac);
  --visual-position:70% 52%;
}
.services.visual-bg{
  --visual-image:url("casos/fondo-servicios.jpg");
  --visual-overlay:linear-gradient(105deg,#e9e6dafc 5%,#e9e6dae8 48%,#e9e6dabf);
  --visual-position:85% 55%;
  --visual-from:translate3d(3%,3%,0) scale(1.04);
  --visual-to:translate3d(-2%,-4%,0) scale(1.09);
}
.contact.visual-bg{
  --visual-image:url("casos/fondo-contacto.jpg");
  --visual-overlay:linear-gradient(100deg,#0d1959b8,#101c6fdb 53%,#141f71f0);
  --visual-position:25% 49%;
}
.contact.visual-bg::before{background-image:var(--visual-image)}
.contact.visual-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--visual-overlay);
  pointer-events:none;
}
.background-film{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--visual-position);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}
.background-film.is-visible{opacity:1}
@media(prefers-reduced-motion:reduce){.background-film{display:none}}
@media(prefers-reduced-motion:no-preference){
  @supports(view-timeline-name:--visual-section){
    .visual-bg{view-timeline-name:--visual-section}
    .visual-bg::before{
      animation:visual-drift 1s linear both;
      animation-timeline:--visual-section;
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes visual-drift{
  from{transform:var(--visual-from,translate3d(-3%,4%,0) scale(1.04))}
  to{transform:var(--visual-to,translate3d(3%,-4%,0) scale(1.09))}
}
.goals{background:var(--ink);color:var(--paper)}
.section-label{margin-bottom:16px}
.goals .section-label,.contact .section-label{color:#ffc3b8}
.goal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;border-block:1px solid #676976}
.goal-grid a{display:grid;gap:10px;align-content:start;position:relative;padding:16px 25px 20px 12px;border-inline-end:1px solid #676976;font-weight:700}
.goal-grid a:last-child{border:0}
.goal-grid a:hover{background:#272b40}
.goal-grid span{font: .72rem var(--mono);color:#ffc3b8}
.goal-grid b{position:absolute;right:10px;top:11px;color:var(--coral)}
.section-heading{display:grid;grid-template-columns:1fr .52fr;gap:25px;align-items:end}
.section-heading p{max-width:300px;font-size:1.08rem}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-block:28px 22px}
.filters button{padding:7px 12px;background:transparent;border:1px solid var(--ink);color:var(--ink);font-size:.85rem;font-weight:700}
.filters button:hover{background:#e5e7ff}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}
.project{border:1px solid var(--ink);display:block;transition:box-shadow .18s,transform .18s}
.project:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.project-visual{min-height:190px;aspect-ratio:2/1;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--tone,var(--blue));color:var(--ink)}
.project-visual svg{width:73%;height:84%;display:block;filter:drop-shadow(7px 7px 0 #151829)}
.project-visual img{width:100%;height:100%;object-fit:cover;object-position:top;position:absolute;inset:0}
.project-visual img.project-logo{object-fit:contain;object-position:center;padding:12%;background:var(--paper)}
.project-visual .serial{position:absolute;top:12px;left:13px;font:700 .7rem var(--mono);background:var(--paper);padding:2px 6px}
.project-info{padding:15px 15px 18px;position:relative}
.meta{font:700 .68rem var(--mono);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.project h3{font-size:clamp(1.5rem,3vw,2.45rem);max-width:91%}
.project .arrow{position:absolute;right:14px;bottom:14px;font-size:1.5rem;color:var(--blue)}
.services{background:#e9e6da}
.service-list{margin-top:30px}
.service{display:grid;grid-template-columns:58px 1fr 1fr;gap:15px;align-items:start;padding:23px 0;border-top:1px solid #aaa99d;scroll-margin-top:20px}
.service:target{border-top-color:var(--blue);border-top-width:3px}
.service-number{font:700 .85rem var(--mono);color:var(--blue)}
.service h3{font-size:clamp(1.65rem,3.3vw,3rem)}
.service p{max-width:450px;margin-bottom:7px}
.service a{color:var(--blue);font-weight:750;text-decoration:underline;text-underline-offset:4px}
.process h2{max-width:820px}
.process ol{list-style:none;counter-reset:steps;display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:30px 0 0;gap:15px}
.process li{border-top:2px solid var(--ink);padding-top:12px;counter-increment:steps}
.process li::before{content:"0" counter(steps);display:block;font:700 .8rem var(--mono);color:var(--blue);margin-bottom:8px}
.process strong{font-size:1.12rem}
.process li p{margin-top:5px;max-width:295px}
.contact{background:#1d32bd;color:white}
.contact-grid{display:grid;grid-template-columns:1fr .82fr;gap:35px}
.contact-grid>div>p{margin-top:18px;max-width:380px}
.contact-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;font-weight:750;text-decoration-thickness:1px}
.contact-links a{text-decoration:underline;text-underline-offset:4px}
form{display:grid;gap:9px;align-content:start}
label{font-weight:750;font-size:.92rem}
form select,form textarea{width:100%;color:var(--ink);background:var(--paper);padding:10px;border:1px solid transparent;border-radius:0;resize:vertical}
form label:not(:first-child){margin-top:8px}
.button.light{background:var(--paper);color:var(--ink);justify-self:start;margin-top:6px}
.button.light:hover{background:#ffc3b8}
.button.light:focus-visible{outline-color:white}
.form-note{font-size:.82rem}
#brief-result{display:grid;gap:8px}
.brief-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.brief-actions .button{margin-top:0}
.copy{justify-self:start;background:transparent;color:white;border:1px solid white;padding:6px 10px}
.footer{display:flex;justify-content:space-between;align-items:center;padding-block:22px;font-size:.85rem}
dialog{color:var(--ink);background:var(--paper);border:1px solid var(--ink);box-shadow:7px 7px 0 var(--ink);width:min(92vw,720px);max-height:87vh;padding:0;overscroll-behavior:contain}
dialog::backdrop{background:#151829bd}
body:has(dialog[open]){overflow:hidden}
.dialog-top{position:sticky;top:0;z-index:1;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 20px;border-bottom:1px solid var(--line)}
.dialog-top .section-label{margin:0}
.dialog-top button{background:transparent;color:var(--ink);border:1px solid var(--ink);width:35px;height:35px}
#case-body{padding:20px}
#case-body h2{font-size:clamp(2rem,5vw,3.6rem);margin:8px 0 18px}
#case-body h3{font-size:1.4rem;margin:18px 0 6px}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.case-gallery img{width:100%;height:auto;display:block}
.case-gallery figcaption{font-size:.82rem;margin-top:4px}

:is(a,button,select,textarea){
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,
    box-shadow .24s ease,transform .24s ease,translate .24s ease;
}
:is(a,button):active{translate:0 1px}
:is(.button span,.goal-grid b,.project .arrow,.project-visual img){
  transition:transform .36s cubic-bezier(.2,.65,.3,1);
}
.project:focus-visible{box-shadow:5px 5px 0 var(--blue)}
#play-motion:focus-visible{outline-offset:-4px}
@media(hover:hover){
  :is(.button,.nav-cta,#play-motion,.copy,.dialog-top button):hover{
    translate:0 -2px;
    box-shadow:0 5px 14px #15182935;
  }
  :is(.button,.goal-grid a,.project):is(:hover,:focus-visible) :is(span[aria-hidden],b,.arrow){
    transform:translate(3px,-2px);
  }
  .project:is(:hover,:focus-visible) .project-visual img:not(.project-logo){transform:scale(1.045)}
  :is(.text-link,.service a,.footer a,.top nav a,.explorer-detail a):hover{color:var(--blue)}
  :is(.contact-links a,.copy):hover{color:#ffc3b8}
}
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:scroll()){
    .site-header::after{
      transform-origin:left;
      animation:page-progress 1s linear both;
      animation-timeline:scroll(root block);
    }
  }
  @supports(animation-timeline:view()){
    :is(.hero-art,.goals .goal-grid,.work .section-heading,.services .service,.process li,.contact form){
      animation:section-arrive 1s ease-out both;
      animation-timeline:view();
      animation-range:entry 0% entry 82%;
    }
    :is(.hero-art,.goals .goal-grid,.work .section-heading,.services .service,.process li,.contact form):focus-within{
      animation:none;
    }
  }
}
@keyframes page-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes section-arrive{from{opacity:.74;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .hero-water{
    --water-wash:linear-gradient(180deg,#f7f5ede0,#f7f5edbd 57%,#f7f5ed70);
    --visual-position:34% center;
  }
  .hero,.section-heading,.contact-grid{grid-template-columns:1fr}
  .hero{gap:30px}.hero-art{max-width:620px}
  .goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goal-grid a:nth-child(2){border-inline-end:0}
  .goal-grid a:nth-child(n+3){border-top:1px solid #676976}
  .service{grid-template-columns:30px 1fr;gap:7px}
  .service>div{grid-column:2}
}
@media(max-width:470px){
  :root{--header-offset:111px}
  .top{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding-block:10px}.brand{width:72px;font-size:1.6rem}.brand small{font-size:.43rem}
  nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px;font-size:.84rem}.nav-cta{grid-column:2;grid-row:1;padding:5px 7px}
  .project-grid,.process ol,.case-gallery{grid-template-columns:1fr}
  .project-visual{min-height:150px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  :is(a,button):is(:hover,:active),.project-visual img{translate:none!important;transform:none!important}
  :is(.button span,.goal-grid b,.project .arrow){transform:none!important}
}