/* Layout: maqueta de la home de JUMP. Papel cálido de fondo, bandas de color de marca a lo ancho, estampitas en el inicio. Look único de marca (no cambia con el tema). */
:root{
  --verde:#013927; --gris:#383E48; --oliva:#C2C483; --azul:#5A85C9; --naranja:#E6450D; --lima:#97C845;
  --papel:#F3F0E8; --linea:rgba(1,57,39,.16); --blanco:#FFFFFF;
  --f-title:'League Spartan','Arial Black',system-ui,sans-serif;
  --f-body:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --f-script:'Lemon Tuesday','Caveat','Comic Sans MS',cursive;
  color-scheme:light;
}
html,body{background:var(--papel);color:var(--gris)}
body{font-family:var(--f-body);font-size:16px;line-height:1.55}
main{overflow-x:clip}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-title);font-weight:700;font-size:13px;letter-spacing:.22em;color:var(--naranja);text-transform:uppercase}
h1,h2,h3{font-family:var(--f-title);font-weight:800;color:var(--verde);letter-spacing:-.015em;margin:0;text-wrap:balance}
h2{font-size:clamp(36px,5vw,64px);line-height:.98}
.script{font-family:var(--f-script);font-weight:700;color:var(--verde)}
:focus-visible{outline:3px solid var(--lima);outline-offset:3px}

/* barra superior */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--papel)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(243,240,232,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
header img{height:36px;width:auto;display:block}
nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
nav a{color:var(--verde);text-decoration:none}
nav a:hover{color:var(--naranja)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--verde);color:var(--papel);padding:14px 22px;border-radius:999px;transition:background .2s}
.btn:hover{background:var(--naranja);color:var(--blanco)}
nav .btn{padding:11px 18px;font-size:12px}
@media (max-width:900px){nav a:not(.btn){display:none}}

/* hero con estampitas */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:56px 72px}
.hero h1{font-size:clamp(40px,5.6vw,76px);line-height:.98}
.hero .uline{display:block;width:min(420px,70%);height:16px;margin-top:14px}
.hero .desc{margin-top:26px;font-size:14px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--verde)}
.hero .cities{margin-top:10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.hero .ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:34px}
.hero .ctas a.link{font-weight:600;color:var(--verde);text-underline-offset:5px;text-decoration-color:var(--lima);text-decoration-thickness:2px}
.cluster{position:relative;aspect-ratio:1/1;max-width:100%}
.card{position:relative;aspect-ratio:3/4;max-width:100%;cursor:pointer;outline:none;border-radius:6px}
.card:focus-visible{box-shadow:0 0 0 3px var(--lima)}
.cluster .card{position:absolute;width:40%}
.cluster .c1{left:4%;top:0;--tilt:-6deg}
.cluster .c2{left:42%;top:8%;--tilt:4deg}
.cluster .c3{left:20%;top:47%;--tilt:-2deg}
.cluster .seal{position:absolute;right:2%;top:54%;width:26%}
.cluster .firma{position:absolute;left:58%;top:80%;font-size:clamp(26px,3vw,40px);line-height:1;transform:rotate(-6deg);white-space:nowrap}
.cluster .star{position:absolute;right:4%;top:84%;width:9%}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-block:36px 48px}.cluster{max-width:460px;margin:0 auto;width:100%}.cluster .firma{left:46%}}
@keyframes drop{from{opacity:0;transform:translateY(-30px) scale(1.06)}to{opacity:1;transform:none}}
.cluster .card{animation:drop .7s cubic-bezier(.2,.8,.2,1.1) both}
.cluster .c2{animation-delay:.15s}.cluster .c3{animation-delay:.3s}

/* estampita: color plano que se vuelve dibujo */
.colr{position:absolute;inset:0}
.colr .flat,.colr .ill{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(var(--tilt,0deg))}
.colr .flat svg{width:82%;height:auto;filter:drop-shadow(0 14px 22px rgba(1,57,39,.22));transition:opacity .45s ease .1s,transform .6s cubic-bezier(.2,.8,.2,1)}
.colr .ill{clip-path:circle(0% at 50% 50%);transition:clip-path .7s cubic-bezier(.5,0,.2,1)}
.colr .ill img{max-height:90%;max-width:86%}
.colr .ill-wrap{position:absolute;inset:0;filter:drop-shadow(0 14px 22px rgba(1,57,39,.22))}
.card.on .ill{clip-path:circle(75% at 50% 50%)}
.card.on .flat svg{opacity:0;transform:scale(.96)}
@media (hover:hover){.card:hover .ill{clip-path:circle(75% at 50% 50%)}.card:hover .flat svg{opacity:0;transform:scale(.96)}}

/* quiénes somos */
.about{background:var(--verde);color:var(--papel)}
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:88px}
.about h2{color:var(--papel)}
.about .eyebrow{color:var(--lima)}
.about p{max-width:52ch;margin:22px 0 0;font-size:17px}
.about .script{color:var(--lima);font-size:clamp(28px,3vw,38px);margin-top:26px;display:block;transform:rotate(-2deg);transform-origin:left}
.reel{position:relative;display:block;border-radius:4px;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.reel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.reel:hover img{transform:scale(1.04)}
.play{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:14px;color:var(--blanco);font:700 13px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.play i{width:64px;height:64px;border-radius:50%;background:var(--naranja);display:grid;place-items:center}
.play i::after{content:"";border-left:18px solid var(--blanco);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr;gap:36px;padding-block:56px}}

/* servicios con foto que cambia */
.services{padding-block:96px 40px}
.services .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:48px}
.services .head p{margin:0;max-width:50ch;font-size:17px}
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.svc{display:flex;flex-direction:column;background:var(--blanco);border-radius:4px;overflow:hidden;text-decoration:none;color:var(--gris)}
.swap{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--c)}
.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.swap img.b{opacity:0;transform:scale(1.06)}
.svc.on .swap img.b{opacity:1;transform:none}
@media (hover:hover){.svc:hover .swap img.b{opacity:1;transform:none}}
.swap .tag{position:absolute;left:18px;top:18px;background:var(--c);color:var(--ink);font:700 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;padding:8px 11px;border-radius:2px}
.svc .body{background:var(--c);color:var(--ink);padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.svc h3{color:var(--ink);font-size:clamp(26px,2.6vw,34px);line-height:1}
.svc .lead{font-family:var(--f-script);font-size:26px;line-height:1.1}
.svc ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.svc li{font-size:12.5px;font-weight:500;border:1.5px solid currentColor;border-radius:999px;padding:5px 11px;opacity:.9}
.svc .more{margin-top:auto;padding-top:14px;font:700 12px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.s-estr{--c:var(--oliva);--ink:var(--verde)}
.s-cont{--c:var(--azul);--ink:var(--blanco)}
.s-ev{--c:var(--naranja);--ink:var(--blanco)}
.s-imp{--c:var(--lima);--ink:var(--verde)}
@media (max-width:860px){.services{padding-block:64px 24px}.services .head{grid-template-columns:1fr;gap:16px}.grid4{grid-template-columns:1fr}}

/* marcas */
.brands{padding-block:56px 88px}
.brands .row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:26px}
.brands .row div{background:var(--blanco);border-radius:4px;aspect-ratio:3/2;display:grid;place-items:center;padding:14px}
.brands img{max-height:56px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.brands .row div:hover img{filter:none;opacity:1}
@media (max-width:900px){.brands .row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.brands .row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* compromiso educación */
.edu{background:var(--lima);color:var(--verde)}
.edu .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:center;padding-block:56px}
.edu .plus{font-family:var(--f-title);font-weight:800;font-size:120px;line-height:.7}
.edu h2{font-size:clamp(30px,3.6vw,46px)}
.edu p{margin:12px 0 0;max-width:60ch}
.edu .ods{border:3px solid var(--verde);border-radius:50%;width:132px;height:132px;display:grid;place-items:center;text-align:center;font-family:var(--f-title);font-weight:800;line-height:1;transform:rotate(-10deg)}
.edu .ods b{font-size:44px;display:block}
.edu .ods span{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:760px){.edu .wrap{grid-template-columns:1fr;gap:20px}.edu .plus{font-size:80px}}

/* presencia regional */
.region{padding-block:96px 56px}
.region .head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:end;margin-bottom:40px}
.region .head p{margin:0;font-size:17px;max-width:46ch}
.stamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.stamps .card:nth-child(1){--tilt:-3deg}
.stamps > div:nth-child(1) .card{--tilt:-3deg}.stamps > div:nth-child(2) .card{--tilt:2deg}.stamps > div:nth-child(3) .card{--tilt:-1.5deg}
.city-cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--verde)}
.city-cap em{font-style:normal;color:var(--gris);font-weight:500}
.region .hint{margin-top:28px;font-size:13px}
@media (max-width:860px){.region{padding-block:64px 40px}.region .head{grid-template-columns:1fr;gap:16px}.stamps{grid-template-columns:1fr;max-width:340px;margin:0 auto}}

/* contacto */
.contact{border-top:1px solid var(--linea)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:88px}
.cookie{position:relative;max-width:560px}
.cookie img{width:100%;display:block}
.cookie span{position:absolute;left:25%;right:3%;top:40%;height:33%;display:grid;place-items:center;font-family:var(--f-script);font-weight:700;color:var(--verde);font-size:clamp(20px,2.6vw,34px);transform:rotate(-1deg)}
.contact p{font-size:17px;max-width:44ch;margin:18px 0 0}
.channels{display:grid;gap:14px;margin-top:30px}
.channels div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;align-items:baseline;border-bottom:1px solid var(--linea);padding-bottom:12px}
.channels dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.channels dd{margin:0;font-family:var(--f-title);font-weight:700;font-size:20px;color:var(--verde);overflow-wrap:anywhere}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr;padding-block:56px}}

footer{background:var(--verde);color:var(--papel)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:32px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
footer img{height:30px;width:auto;display:block}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* ---------- elementos compartidos de las páginas internas ---------- */
nav a[aria-current="page"]:not(.btn){border-bottom:2px solid var(--lima);padding-bottom:3px}
.btn-light{background:var(--lima);color:var(--verde);margin-top:30px}
.btn-light:hover{background:var(--papel);color:var(--verde)}
.more-link{margin:10px 0 0;font-weight:600}
.more-link a{color:var(--verde);text-underline-offset:5px;text-decoration-color:var(--lima);text-decoration-thickness:2px}
.lede{font-size:clamp(17px,1.6vw,20px);max-width:52ch;margin:22px 0 0}
.pending{display:inline-block;background:var(--papel);border:1.5px dashed var(--naranja);color:var(--naranja);font:600 10.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:3px}

.page-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center;padding-block:64px 56px;border-bottom:1px solid var(--linea)}
.page-hero h1{font-size:clamp(44px,6.4vw,88px);line-height:.95;margin-top:14px}
.page-hero .uline{display:block;width:min(380px,70%);height:16px;margin-top:12px}
.page-hero .art{display:flex;justify-content:center;align-items:center}
.page-hero .art svg{max-width:100%;height:auto}
@media (max-width:760px){.page-hero{grid-template-columns:1fr;padding-block:40px 36px}.page-hero .art{justify-content:flex-start}}

/* nosotros */
.essence{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;padding-block:80px}
.essence .cols{columns:2 280px;column-gap:40px}
.essence .cols p{margin:0 0 16px;break-inside:avoid}
.essence .big{font-family:var(--f-title);font-weight:800;color:var(--verde);font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-top:10px}
@media (max-width:860px){.essence{grid-template-columns:1fr;gap:24px;padding-block:56px}}
.ways{background:var(--verde);color:var(--papel)}
.ways .wrap{padding-block:88px}
.ways h2{color:var(--papel)}
.ways .eyebrow{color:var(--lima)}
.ways .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.way{background:var(--papel);color:var(--gris);border-radius:4px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px}
.way .draw{height:130px;display:flex;align-items:center}
.way .draw svg{max-width:100%;height:auto;max-height:130px}
.way .lbl{font:700 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--naranja)}
.way .script{font-size:30px;line-height:1.05}
.way p{margin:0;font-size:14.5px}
@media (max-width:1000px){.ways .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ways .grid{grid-template-columns:1fr}.ways .wrap{padding-block:56px}}
.team{padding-block:88px}
.team .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.faces{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:14px;margin-top:40px}
.faces div:nth-child(odd){transform:rotate(-3deg)}.faces div:nth-child(even){transform:rotate(2.5deg) translateY(10px)}
.faces svg{width:100%;height:auto;display:block}
@media (max-width:900px){.faces{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:520px){.faces{grid-template-columns:repeat(3,minmax(0,1fr))}.team{padding-block:56px}}
.traits{border-top:1px solid var(--linea)}
.traits .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding-block:80px}
.traits ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.traits li{border-bottom:1px solid var(--linea);padding:14px 0;font-family:var(--f-title);font-weight:700;font-size:21px;color:var(--verde)}
.traits li span{color:var(--gris);font-weight:600}
@media (max-width:860px){.traits .wrap{grid-template-columns:1fr;gap:24px;padding-block:56px}.traits ul{grid-template-columns:1fr}}

/* servicios */
.area{padding-block:80px;border-bottom:1px solid var(--linea);scroll-margin-top:80px}
.area .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.area:nth-of-type(even) .media{order:2}
.area .media .swap{aspect-ratio:4/5;border-radius:4px;cursor:pointer}
.area .media .tag{font-size:12px}
.area .media small{display:block;margin-top:10px;font-size:12px;opacity:.8}
.area h2{font-size:clamp(34px,4vw,54px)}
.area .lead{font-family:var(--f-script);font-weight:700;font-size:clamp(28px,2.8vw,36px);color:var(--c-ink);margin-top:10px}
.area p{margin:16px 0 0;max-width:52ch}
.area ul.list{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.area ul.list li{border-bottom:1px solid var(--linea);padding:11px 0 11px 22px;position:relative;font-size:15px}
.area ul.list li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;border-radius:50%;background:var(--c)}
.area .logos-row{grid-column:1/-1;order:3}
.area .logos-t{font:700 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase}
.area .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:14px}
.area .logos div{background:var(--blanco);border-radius:4px;aspect-ratio:16/9;display:grid;place-items:center;padding:12px 16px}
.area .logos img{max-width:100%;max-height:56px;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .3s,opacity .3s}
.area .logos div:hover img{filter:none;opacity:1}
@media (max-width:760px){.area .logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.area .logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.a-estr{--c:var(--oliva);--c-ink:#6E7030;--ink:var(--verde)}
.a-cont{--c:var(--azul);--c-ink:var(--azul);--ink:var(--blanco)}
.a-ev{--c:var(--naranja);--c-ink:var(--naranja);--ink:var(--blanco)}
.a-imp{--c:var(--lima);--c-ink:#5E8A1E;--ink:var(--verde)}
.area.on .swap img.b{opacity:1;transform:none}
@media (hover:hover){.area .swap:hover img.b{opacity:1;transform:none}}
@media (max-width:860px){.area{padding-block:56px}.area .wrap{grid-template-columns:1fr;gap:28px}.area:nth-of-type(even) .media{order:0}.area ul.list{grid-template-columns:1fr}}

/* proyectos */
.filters{display:flex;gap:10px;flex-wrap:wrap;padding-block:32px 8px}
.filters button{font:600 13px/1 var(--f-body);color:var(--verde);background:var(--blanco);border:1.5px solid var(--verde);border-radius:999px;padding:10px 16px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--verde);color:var(--papel)}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-block:24px 96px}
.proj{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--gris)}
.proj .ph{position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--c)}
.proj .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.proj:hover .ph img{transform:scale(1.04)}
.proj .ph .tag{position:absolute;left:14px;top:14px;background:var(--c);color:var(--ink);font:700 10.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:2px}
.proj .ph .vid{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;background:var(--naranja);display:grid;place-items:center}
.proj .ph .vid::after{content:"";border-left:15px solid var(--blanco);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.proj h3{font-size:24px;line-height:1.05}
.proj .client{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.proj p{margin:0;font-size:14.5px}
.proj[hidden]{display:none!important}
.p-estr{--c:var(--oliva);--ink:var(--verde)}.p-cont{--c:var(--azul);--ink:var(--blanco)}.p-ev{--c:var(--naranja);--ink:var(--blanco)}.p-imp{--c:var(--lima);--ink:var(--verde)}
@media (max-width:960px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.projects{grid-template-columns:1fr}}

/* contacto */
.contact-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;padding-block:64px 88px}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
form .full{grid-column:1/-1}
label{display:block;font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin-bottom:8px}
input,select,textarea{width:100%;box-sizing:border-box;font:500 16px/1.4 var(--f-body);color:var(--gris);background:var(--blanco);border:1.5px solid var(--linea);border-radius:4px;padding:13px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(151,200,69,.45)}
textarea{min-height:140px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;display:inline-flex;align-items:center;gap:8px;background:var(--blanco);border:1.5px solid var(--linea);border-radius:999px;padding:9px 14px;font-size:12px;letter-spacing:.06em;text-transform:none;font-weight:600;cursor:pointer}
.chips input{width:auto;margin:0;accent-color:var(--verde)}
.sent{grid-column:1/-1;background:var(--lima);color:var(--verde);border-radius:4px;padding:16px 18px;font-weight:600}
.offices{display:grid;gap:22px}
.office{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center}
.office svg{width:96px;height:auto;display:block}
.office h3{font-size:24px}
.office p{margin:4px 0 0;font-size:14px}
@media (max-width:860px){.contact-page{grid-template-columns:1fr;padding-block:40px 64px}form{grid-template-columns:1fr}}

/* dibujos: un mínimo movimiento al pasar el cursor (o al tocar la tarjeta) */
[data-draw] svg *{transform-box:fill-box}
.cq-body{transform-origin:50% 60%}
.cq-star{transform-origin:50% 50%}
.pl-tool{transform-origin:100% 0%}
.pl-dirt{transform-origin:50% 100%}
.hr{transform-origin:50% 60%}
.gl-paper{transform-origin:0% 50%}
.ast{transform-origin:50% 50%}
@keyframes cq-wobble{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg) scale(1.03)}65%{transform:rotate(4deg)}}
@keyframes cq-spin{to{transform:rotate(180deg) scale(1.15)}}
@keyframes pl-dig{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg) translateY(4px)}70%{transform:rotate(4deg)}}
@keyframes pl-dirt{0%,100%{transform:none}45%{transform:translateY(-5px) scaleX(1.08)}}
@keyframes beat{0%,100%{transform:scale(1)}20%{transform:scale(1.1)}40%{transform:scale(.97)}60%{transform:scale(1.07)}}
@keyframes paper{0%,100%{transform:none}50%{transform:translateX(10px) rotate(-2deg)}}
@keyframes ast{to{transform:rotate(90deg)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .way:hover .cq-body,.art:hover .cq-body{animation:cq-wobble .9s ease-in-out}
  .way:hover .cq-star,.art:hover .cq-star{animation:cq-spin .9s cubic-bezier(.3,1.4,.5,1) forwards}
  .way:hover .pl-tool,.art:hover .pl-tool{animation:pl-dig .9s ease-in-out}
  .way:hover .pl-dirt,.art:hover .pl-dirt{animation:pl-dirt .9s ease-in-out}
  .way:hover .hr,.art:hover .hr{animation:beat 1s ease-in-out infinite}
  .way:hover .gl-paper,.art:hover .gl-paper{animation:paper 1.1s ease-in-out infinite}
  .way:hover .ast,.art:hover .ast{animation:ast .8s cubic-bezier(.3,1.4,.5,1) forwards}
}
@media (prefers-reduced-motion:no-preference){
  .way.tap .cq-body{animation:cq-wobble .9s ease-in-out}.way.tap .cq-star{animation:cq-spin .9s forwards}
  .way.tap .pl-tool{animation:pl-dig .9s ease-in-out}.way.tap .pl-dirt{animation:pl-dirt .9s ease-in-out}
  .way.tap .hr{animation:beat 1s ease-in-out 2}.way.tap .gl-paper{animation:paper 1.1s ease-in-out 2}
}
.proj .ph .vid{box-shadow:0 0 0 3px rgba(255,255,255,.85)}

/* video en la misma página */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(1,57,39,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.lb-frame{width:min(1100px,100%);aspect-ratio:16/9}
.lb-frame iframe{width:100%;height:100%;border:0;border-radius:4px;display:block}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer}