/* ===== Quiénes somos =====
   Concepto: la página entera es un cuadro de Mondrian que se arma al bajar.
   Fondo papel, líneas negras gruesas, bloques rojo/amarillo/azul. Montserrat 900 (la letra del logo) + DM Sans. */
#v-nos{
  --n-papel:#F4EFE6;
  --n-blanco:#FBF8F2;
  --n-tinta:#0E0F10;
  --n-gris:#5E5A54;
  --n-rojo:#C2192E;
  --n-amarillo:#ECC328;
  --n-azul:#285DA2;
  --n-linea:clamp(6px,1vw,12px);
  --n-tit:'Montserrat','Arial Black',Arial,sans-serif;
  --n-texto:'DM Sans',Arial,Helvetica,sans-serif;
  --n-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --n-g:clamp(16px,4vw,56px);
  color-scheme:light;
  background:var(--n-papel);color:var(--n-tinta);font-family:var(--n-texto);font-size:17px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased;
}
html.en-nosotros body{background:#F4EFE6}
#v-nos *{box-sizing:border-box}
#v-nos p,#v-nos h1,#v-nos h2,#v-nos h3{margin:0}
#v-nos h1,#v-nos h2,#v-nos h3{font-weight:inherit;text-wrap:balance}
#v-nos a{color:inherit}
#v-nos :focus-visible{outline:3px solid var(--n-azul);outline-offset:3px}
#v-nos .n-et{font-family:var(--n-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--n-gris)}

/* Barra */
#v-nos .n-barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding-inline:var(--n-g);background:linear-gradient(var(--n-papel) 55%,rgba(244,239,230,0))}
#v-nos .n-barra-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#v-nos .n-barra img{height:32px;width:auto;display:block}
#v-nos .n-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--n-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border-radius:999px;border:1.5px solid var(--n-tinta)}
#v-nos .n-btn:hover{background:var(--n-tinta);color:var(--n-papel)}

/* El lienzo: una cuadrícula con líneas negras (el negro se ve entre las celdas) */
#v-nos .n-lienzo{padding:0 var(--n-g) var(--n-g)}
#v-nos .n-cuadro{display:grid;gap:var(--n-linea);background:var(--n-tinta);border:var(--n-linea) solid var(--n-tinta)}
#v-nos .n-cuadro+.n-cuadro{border-top:0}
#v-nos .n-cuadro{position:relative}
#v-nos.animar .n-cuadro::before{content:"";position:absolute;z-index:3;left:calc(-1 * var(--n-linea));right:calc(-1 * var(--n-linea));top:calc(-1 * var(--n-linea));height:var(--n-linea);background:var(--n-tinta);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
#v-nos.animar .n-cuadro.visto::before{transform:scaleX(1)}
#v-nos.animar .n-cuadro .n-celda{transition:opacity .7s ease}
#v-nos.animar .n-cuadro:not(.visto) .n-celda:not(.r):not(.a):not(.z){opacity:0}
#v-nos.animar .n-cuadro.visto .n-celda:nth-child(2){transition-delay:.12s}#v-nos.animar .n-cuadro.visto .n-celda:nth-child(3){transition-delay:.24s}#v-nos.animar .n-cuadro.visto .n-celda:nth-child(n+4){transition-delay:.36s}
#v-nos .n-grano{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-size:180px 180px}
#v-nos .n-visor{position:fixed;left:0;top:0;z-index:61;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;transition:width .25s ease,height .25s ease,margin .25s ease,opacity .2s ease;opacity:0}
#v-nos .n-visor::before,#v-nos .n-visor::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--n-tinta)}
#v-nos .n-visor::before{left:0;top:0;border-left-width:3px;border-top-width:3px}
#v-nos .n-visor::after{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px}
#v-nos .n-visor.on{opacity:1}
#v-nos .n-visor.grande{width:58px;height:58px;margin:-29px 0 0 -29px}
#v-nos .n-celda{background:var(--n-blanco);padding:clamp(20px,3.4vw,48px);min-width:0}
#v-nos .n-celda.r{background:var(--n-rojo);color:#fff}
#v-nos .n-celda.a{background:var(--n-amarillo)}
#v-nos .n-celda.z{background:var(--n-azul);color:#fff}
#v-nos .n-celda.t{background:var(--n-tinta);color:var(--n-papel)}
#v-nos .n-celda.vacia{padding:0;min-height:40px}
/* Armado: las celdas de color se "pintan" al aparecer */
#v-nos.animar .n-celda.r,#v-nos.animar .n-celda.a,#v-nos.animar .n-celda.z{transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
#v-nos.animar .n-cuadro:not(.visto) .n-celda.r,#v-nos.animar .n-cuadro:not(.visto) .n-celda.a,#v-nos.animar .n-cuadro:not(.visto) .n-celda.z{clip-path:inset(0 100% 0 0)}
#v-nos.animar .n-cuadro.visto .n-celda.a{transition-delay:.15s}
#v-nos.animar .n-cuadro.visto .n-celda.z{transition-delay:.3s}

/* 1 · Apertura */
#v-nos .n-ap{grid-template-columns:minmax(0,1fr) minmax(0,.18fr);grid-template-rows:auto auto}
#v-nos .n-ap .n-nombre{grid-row:1;grid-column:1;padding-block:clamp(24px,4vw,56px);overflow:hidden}
#v-nos .n-logo{position:relative;width:min(100%,980px);aspect-ratio:1400/599;margin:clamp(16px,3vw,32px) 0 0}
#v-nos .n-pz{position:absolute;display:block}
#v-nos .n-pz img{width:100%;height:100%;display:block}
#v-nos .n-pz.tinta img{filter:brightness(0)}
#v-nos.animar .n-logo:not(.armado) .n-pz{opacity:0;transform:var(--desde)}
#v-nos.animar .n-logo.armado .n-pz{animation:n-entra .8s cubic-bezier(.2,.9,.25,1) var(--d) both}
@keyframes n-entra{from{opacity:0;transform:var(--desde)}to{opacity:1;transform:none}}
#v-nos .n-ap .r{grid-row:1;grid-column:2}
#v-nos .n-ap .n-eje{grid-row:2;grid-column:1}
#v-nos .n-ap .a{grid-row:2;grid-column:2}
#v-nos .n-eje p:not(.n-et):not(.n-pista){font-family:var(--n-tit);font-weight:800;font-size:clamp(22px,3vw,42px);line-height:1.1;text-transform:uppercase;letter-spacing:-.01em;max-width:22ch}
#v-nos .n-eje .n-et{margin-bottom:14px}
#v-nos .n-pista{font-family:var(--n-mono);font-size:12px;color:var(--n-gris);margin-top:22px}

/* 2 · Filosofía */
#v-nos .n-fil{grid-template-columns:minmax(0,.22fr) minmax(0,1fr)}
#v-nos .n-fil .z{grid-row:span 2}
#v-nos .n-frase-g{font-family:var(--n-tit);font-weight:900;font-size:clamp(36px,6.4vw,96px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
#v-nos .n-lineas{display:flex;flex-direction:column;gap:16px;font-size:clamp(18px,1.9vw,24px);line-height:1.4;max-width:46ch}
#v-nos .n-lineas p:last-child{font-family:var(--n-tit);font-weight:800;text-transform:uppercase;font-size:clamp(18px,2vw,26px);line-height:1.2;letter-spacing:-.01em}
#v-nos .n-gira{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em}
#v-nos .n-ranura{display:inline-block;height:1.45em;overflow:hidden;vertical-align:bottom;background:var(--n-amarillo);padding:0 .3em}
#v-nos .n-rueda{display:block;transition:transform .6s cubic-bezier(.7,0,.2,1)}
#v-nos .n-rueda span{display:block;height:1.45em;line-height:1.45;font-weight:700;white-space:nowrap}
#v-nos .n-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 3 · Inspiración: del árbol a la cuadrícula */
#v-nos .n-insp{position:relative;height:340vh;border:var(--n-linea) solid var(--n-tinta);border-top:0;background:var(--n-tinta)}
#v-nos .n-insp-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--n-linea)}
#v-nos .n-insp-txt{background:var(--n-blanco);padding:clamp(80px,9vh,110px) clamp(20px,3.4vw,48px) clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:18px;overflow:hidden}
#v-nos .n-insp-txt h2{font-family:var(--n-tit);font-weight:900;font-size:clamp(30px,4vw,60px);line-height:.95;text-transform:uppercase;letter-spacing:-.02em}
#v-nos .n-insp-txt p{color:var(--n-gris);font-size:clamp(15px,1.4vw,18px);max-width:46ch}
#v-nos .n-insp-txt p.fuerte{color:var(--n-tinta);font-family:var(--n-tit);font-weight:800;font-size:clamp(18px,1.9vw,24px);line-height:1.2;text-transform:uppercase}
#v-nos .n-etapa{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
#v-nos .n-etapa span{font-family:var(--n-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--n-tinta);border-radius:999px;padding:6px 10px;opacity:.35;transition:opacity .3s ease,background .3s ease}
#v-nos .n-etapa span.on{opacity:1;background:var(--n-tinta);color:var(--n-papel)}
#v-nos .n-arbol{background:var(--n-blanco);position:relative;min-width:0}
#v-nos .n-arbol canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#v-nos .n-insp-movil{display:none}
#v-nos .n-insp-movil p{color:var(--n-gris);font-size:16px}
@media (max-width:820px){
  #v-nos .n-insp-movil{display:grid}
  #v-nos .n-insp-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  #v-nos .n-insp-txt{padding-top:80px;gap:10px}
  #v-nos .n-insp-txt>p:not(.fuerte){display:none}
  #v-nos .n-insp-txt h2{font-size:26px}
  #v-nos .n-insp-txt p.fuerte{font-size:15px}
}

/* Arma tu Mondrian */
#v-nos .n-juego{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
#v-nos .n-juego-cab{display:flex;flex-direction:column;gap:16px}
#v-nos .n-juego-cab h2{font-family:var(--n-tit);font-weight:900;font-size:clamp(36px,5vw,76px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
#v-nos .n-juego-cab>p{color:var(--n-gris);max-width:38ch}
#v-nos .n-juego-dato{font-family:var(--n-mono);font-size:13px;color:var(--n-tinta)!important}
#v-nos .n-juego-acc{display:flex;flex-wrap:wrap;gap:8px}
#v-nos .n-juego-acc .n-btn{background:none;cursor:pointer;font:inherit;font-family:var(--n-mono);font-size:12px;color:var(--n-tinta)}
#v-nos .n-juego-frase{margin-top:auto;font-family:var(--n-tit);font-weight:800;text-transform:uppercase;font-size:clamp(16px,1.6vw,20px);line-height:1.2;color:var(--n-tinta)!important}
#v-nos .n-juego-zona{padding:clamp(12px,2vw,24px);background:var(--n-papel)}
#v-nos .n-mondrian{position:relative;width:100%;max-width:100%;aspect-ratio:1;display:grid;gap:clamp(8px,1.2vw,14px);background:var(--n-tinta);border:clamp(8px,1.2vw,14px) solid var(--n-tinta);touch-action:none;user-select:none;-webkit-user-select:none}
#v-nos .n-bloque{all:unset;box-sizing:border-box;cursor:pointer;background:var(--n-blanco);transition:background .25s ease}
#v-nos .n-bloque:focus-visible{outline:3px solid var(--n-azul);outline-offset:-6px}
#v-nos .n-asa{position:absolute;z-index:2;touch-action:none}
#v-nos .n-asa.v{top:0;bottom:0;width:28px;margin-left:-14px;cursor:ew-resize}
#v-nos .n-asa.h{left:0;right:0;height:28px;margin-top:-14px;cursor:ns-resize}
#v-nos .n-asa::after{content:"";position:absolute;background:var(--n-tinta);border-radius:999px;opacity:0;transition:opacity .2s ease}
#v-nos .n-asa.v::after{left:50%;top:50%;width:6px;height:44px;margin:-22px 0 0 -3px;background:var(--n-papel);box-shadow:0 0 0 2px var(--n-tinta)}
#v-nos .n-asa.h::after{top:50%;left:50%;height:6px;width:44px;margin:-3px 0 0 -22px;background:var(--n-papel);box-shadow:0 0 0 2px var(--n-tinta)}
#v-nos .n-mondrian:hover .n-asa::after,#v-nos .n-asa.activa::after{opacity:1}
@media (hover:none){#v-nos .n-asa::after{opacity:1}}
@media (max-width:760px){#v-nos .n-juego{grid-template-columns:1fr}}

/* 4 · CREATTIVO */
#v-nos .n-crea{grid-template-columns:repeat(3,minmax(0,1fr))}
#v-nos .n-palabra{grid-column:1/-1;font-family:var(--n-tit);font-weight:900;font-size:min(11.5vw,190px);line-height:.85;letter-spacing:-.03em;text-transform:uppercase;display:flex;flex-wrap:nowrap;white-space:nowrap;justify-content:center;overflow:hidden;padding-block:clamp(28px,4vw,56px)}
#v-nos .n-palabra>span{display:inline-block}
#v-nos .n-t{all:unset;cursor:pointer;display:inline-block;perspective:600px;position:relative}
#v-nos .n-t .cara{display:inline-grid;transition:transform .7s cubic-bezier(.2,.9,.25,1);transform-style:preserve-3d}
#v-nos .n-t .fr,#v-nos .n-t .re{backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center}
#v-nos .n-t .cara{position:relative}
#v-nos .n-t .re{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateY(180deg);white-space:nowrap;font-size:.42em;letter-spacing:0;background:var(--c);color:#fff;padding:.12em .2em;line-height:1}
#v-nos .n-t.t1{--c:var(--n-amarillo)}#v-nos .n-t.t2{--c:var(--n-azul)}
#v-nos .n-t.t1 .re{color:var(--n-tinta)}
#v-nos .n-t[aria-pressed="true"] .cara{transform:rotateY(180deg)}
#v-nos .n-t:focus-visible{outline:3px solid var(--n-azul);outline-offset:4px}
#v-nos .n-t .fr{animation:n-late 2.4s ease-in-out infinite}
#v-nos .n-t.t2 .fr{animation-delay:.4s}
@keyframes n-late{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8%)}90%{transform:translateY(0)}}
#v-nos .n-tpista{grid-column:1/-1;text-align:center;font-family:var(--n-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--n-gris);padding-block:12px}
#v-nos .n-parte{transition:transform .4s ease,box-shadow .4s ease}
#v-nos .n-parte.brilla{box-shadow:inset 0 0 0 6px var(--n-tinta)}
@media (prefers-reduced-motion:reduce){#v-nos .n-t .fr{animation:none}}
#v-nos .n-palabra .t1 .fr{color:var(--n-amarillo);-webkit-text-stroke:2px var(--n-tinta)}
#v-nos .n-palabra .t2 .fr{color:var(--n-azul)}
#v-nos.animar .n-cuadro:not(.visto) .n-palabra .t1{transform:translateY(-60%);opacity:0}
#v-nos.animar .n-cuadro:not(.visto) .n-palabra .t2{transform:translateY(60%);opacity:0}
#v-nos .n-palabra .t1,#v-nos .n-palabra .t2{transition:transform .8s cubic-bezier(.2,.9,.25,1) .3s,opacity .5s ease .3s}
#v-nos .n-parte{display:flex;flex-direction:column;gap:12px}
#v-nos .n-parte b{font-family:var(--n-tit);font-weight:900;font-size:clamp(28px,3.4vw,48px);line-height:1;text-transform:uppercase}
#v-nos .n-parte small{font-family:var(--n-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
#v-nos .n-parte p{font-size:clamp(15px,1.4vw,18px);line-height:1.5}
#v-nos .n-nota{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--n-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:760px){#v-nos .n-crea{grid-template-columns:1fr}}

/* 5 · Antes de empezar */
#v-nos .n-antes{grid-template-columns:repeat(6,minmax(0,1fr))}
#v-nos .n-antes .cab{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px;align-items:end}
#v-nos .n-antes h2{font-family:var(--n-tit);font-weight:900;font-size:clamp(38px,6vw,90px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em}
#v-nos .n-antes .cab p{font-size:clamp(17px,1.6vw,21px);color:var(--n-gris);max-width:40ch}
#v-nos .n-cond{display:flex;flex-direction:column;gap:10px}
#v-nos .n-cond span{font-family:var(--n-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
#v-nos .n-cond b{font-family:var(--n-tit);font-weight:900;font-size:clamp(24px,2.6vw,36px);line-height:1;text-transform:uppercase}
#v-nos .n-cond p{font-size:15px;line-height:1.5}
#v-nos .n-antes .c1{grid-column:span 2}#v-nos .n-antes .c2{grid-column:span 2}#v-nos .n-antes .c3{grid-column:span 2}
#v-nos .n-antes .c4{grid-column:span 3}#v-nos .n-antes .c5{grid-column:span 3}
@media (max-width:820px){#v-nos .n-antes{grid-template-columns:repeat(2,minmax(0,1fr))}#v-nos .n-antes .cab{grid-template-columns:1fr}#v-nos .n-antes .c1,#v-nos .n-antes .c2,#v-nos .n-antes .c3,#v-nos .n-antes .c4{grid-column:span 1}#v-nos .n-antes .c5{grid-column:1/-1}}
@media (max-width:460px){#v-nos .n-antes{grid-template-columns:1fr}#v-nos .n-antes .c1,#v-nos .n-antes .c2,#v-nos .n-antes .c3,#v-nos .n-antes .c4,#v-nos .n-antes .c5{grid-column:1}}
@media (max-width:640px){
  #v-nos .n-ap{grid-template-columns:minmax(0,1fr) 44px}
  #v-nos .n-fil{grid-template-columns:1fr}#v-nos .n-fil .z{grid-row:auto;min-height:44px;padding:0}
  }
@media (prefers-reduced-motion:reduce){#v-nos .n-insp{height:auto}#v-nos .n-insp-pin{position:relative;height:auto;min-height:100svh}}