/* =========================================================
   Gemm · sitio "directo" — el trabajo es el protagonista
   Claro, sin bordes ni esquinas redondas, una tipografía, poco texto.
   Mobile first · quiebres 48rem (768) y 70rem (1120)
   ========================================================= */
:root{
  --bg:#FFFFFF; --fg:#141414; --dim:#6F6C66; --card:#EFEDE9; --acc:#E8FF5A; --rule:#E3E1DC;
  --f:'Inter Tight',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --g:16px; --sec:72px; --nav:60px; --r:0;
}
@media (min-width:48rem){:root{--g:32px;--sec:120px;--nav:72px}}
@media (min-width:70rem){:root{--g:48px;--sec:160px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.5 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,p{margin:0}ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--g)}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--fg);color:var(--bg);padding:10px 14px}
.skip:focus{left:8px}

/* menú */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav__in{height:var(--nav);display:flex;align-items:center;gap:20px}
.nav__logo{margin-right:auto;min-height:44px;display:flex;align-items:center}
.nav__logo img{width:52px;height:auto}
.nav__menu{display:none}
.nav__menu a{color:var(--dim);font-weight:500;padding:12px 0;transition:color .2s}
.nav__menu a:hover,.nav__menu a.is-on{color:var(--fg)}
.nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--fg);color:var(--bg);font-weight:600;font-size:.95rem;transition:background .2s,color .2s}
@media (hover:hover){.nav__cta:hover{background:var(--acc);color:var(--fg)}}
@media (min-width:48rem){.nav__menu{display:flex;gap:32px;margin-right:12px}.nav__logo img{width:60px}}

/* hero */
.hero{padding-top:48px}
.hero__title{font-size:clamp(2.8rem,12.5vw,9.5rem);font-weight:500;line-height:.92;letter-spacing:-.055em}
.hero__sub{margin-top:20px;color:var(--dim)}
.reel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:40px}
.reel__a{grid-column:1/-1}
.reel__a .tile__frame{aspect-ratio:4/3}
.reel__b .tile__frame,.reel__c .tile__frame{aspect-ratio:3/4}
@media (min-width:48rem){
  .hero{padding-top:88px}.hero__sub{margin-top:28px;font-size:1.1rem}
  .reel{grid-template-columns:1.25fr .75fr 1fr;gap:12px;margin-top:72px}
  .reel__a{grid-column:auto}
  .reel .tile__frame{aspect-ratio:auto!important;height:min(72vh,640px)}
}

/* fila de marcas */
.logos{margin-top:56px;overflow:hidden;padding:22px 0;border-block:1px solid var(--rule)}
.logos__track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.logos ul{display:flex;gap:48px;padding-right:48px}
.logos li{color:var(--dim);font-weight:500;font-size:1.05rem;white-space:nowrap;letter-spacing:-.01em}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (min-width:48rem){.logos{margin-top:96px}.logos li{font-size:1.25rem}}

/* tarjeta de trabajo */
.tile{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r);background:var(--card);text-align:left}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile__cap{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:8px 12px;background:var(--bg);color:var(--fg);font-weight:600;font-size:.88rem;line-height:1.1;transition:background .25s,color .25s}
.tile__cap i{display:none;font-style:normal;font-weight:400;color:var(--dim)}
.tile--wide .tile__cap i,.reel .tile__cap i{display:inline}
@media (min-width:48rem){.tile__cap i{display:inline}}
@media (hover:hover){
  .tile:hover img,.tile:hover video{transform:scale(1.04)}
  .tile:hover .tile__cap{background:var(--acc)}
  .tile:hover .tile__cap i{color:var(--fg)}
}

/* áreas: título fijo a la izquierda, trabajo a la derecha */
.area{padding-top:var(--sec)}
.area__in{display:grid;gap:24px}
.area__n{display:block;color:var(--dim);font-weight:500;margin-bottom:8px}
.area__t{font-size:clamp(2.6rem,11vw,6rem);font-weight:500;letter-spacing:-.05em;line-height:.95}
.area__d{margin-top:12px;color:var(--dim)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tiles .tile__frame{aspect-ratio:4/5}
.tiles .tile--wide{grid-column:1/-1}
.tiles .tile--wide .tile__frame{aspect-ratio:16/10}
.tiles--mov .tile__frame{aspect-ratio:9/14}
@media (min-width:48rem){.tiles{gap:12px}.tiles--mov{grid-template-columns:repeat(3,1fr)}.tiles--mov .tile__frame{aspect-ratio:9/16}}
@media (min-width:70rem){
  .area__in{grid-template-columns:minmax(300px,1fr) 2.4fr;gap:48px;align-items:start}
  .area__t{font-size:clamp(3rem,4vw,5rem)}
  .area__head{position:sticky;top:calc(var(--nav) + 40px)}
}

/* cifras */
.nums{padding:var(--sec) 0 0}
.nums__in{display:grid;gap:4px;border-top:1px solid var(--rule);padding-top:32px}
.nums p{font-size:1.1rem;color:var(--dim)}
.nums b{color:var(--fg);font-weight:500;font-size:clamp(2.4rem,10vw,5rem);letter-spacing:-.05em;margin-right:10px;vertical-align:-.12em}
@media (min-width:48rem){.nums__in{grid-template-columns:repeat(3,1fr);gap:24px}}

/* contacto */
.contact{padding:var(--sec) 0}
.contact__t{font-size:clamp(3.4rem,16vw,12rem);font-weight:500;letter-spacing:-.06em;line-height:.9}
.contact__d{margin:20px 0 32px;color:var(--dim);font-size:1.1rem}
.contact__btn{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 32px;background:var(--fg);color:var(--bg);font-weight:600;font-size:1.15rem;transition:transform .3s var(--ease)}
@media (hover:hover){.contact__btn:hover{transform:translateY(-3px);background:var(--acc);color:var(--fg)}}
.foot{border-top:1px solid var(--rule)}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-block:20px;color:var(--dim);font-size:.9rem}
.foot nav{display:flex;gap:20px}
.foot nav a{min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.foot nav a:hover{color:var(--fg)}

/* ventana de proyecto: casi pantalla completa, imágenes al centro */
.modal{padding:0;border:0;margin:0;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--fg)}
.modal::backdrop{background:rgba(255,255,255,.92)}
.modal[open]{display:grid;grid-template-columns:minmax(0,1fr)}
.modal__box{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-width:0;overflow:hidden;background:rgba(255,255,255,.98);animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:scale(.985)}}
.modal__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px var(--g)}
.modal__title{font-size:1.4rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.modal__meta{color:var(--dim);font-size:.92rem;margin-top:4px}
.modal__close{flex:none;width:44px;height:44px;background:var(--fg);color:var(--bg);font-weight:600}
.modal__track{display:flex;min-height:0;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.modal__track::-webkit-scrollbar{display:none}
.modal__track figure{flex:0 0 100%;margin:0;padding:0 var(--g);scroll-snap-align:center;display:flex;align-items:center;justify-content:center;min-height:0;height:100%}
.modal__track img,.modal__track video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r)}
.modal__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:14px var(--g) 18px}
.modal__text{max-width:60ch;color:#3d3b37;font-size:.98rem}
.modal__ctrl{display:flex;align-items:center;gap:4px}
.modal__ctrl button{width:44px;height:44px;background:var(--card);font-weight:600}
.modal__ctrl button:disabled{opacity:.3;cursor:default}
.modal__ctrl span{min-width:48px;text-align:center;color:var(--dim);font-size:.9rem}
@media (min-width:48rem){.modal__top{padding:24px var(--g)}.modal__title{font-size:1.8rem}.modal__foot{padding:20px var(--g) 28px}}

/* ---------- animaciones sutiles al hacer scroll ---------- */
/* textos: suben y aparecen */
.js [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-rv].is-in{opacity:1;transform:none}
/* trabajos: la imagen se descubre desde abajo y se acomoda */
.js .tile[data-rv]{opacity:1;transform:none;clip-path:inset(12% 0 0 0);transition:clip-path 1.2s var(--ease)}
.js .tile[data-rv].is-in{clip-path:inset(0 0 0 0)}
.js .tile[data-rv] img,.js .tile[data-rv] video{scale:1.1;transition:scale 1.6s var(--ease),transform .9s var(--ease)}
.js .tile[data-rv].is-in img,.js .tile[data-rv].is-in video{scale:1}
/* leve desplazamiento de la imagen dentro de su marco (parallax) */
@media (min-width:48rem){.tile img,.tile video{height:calc(100% + 40px);margin-top:-20px;translate:0 var(--py,0px)}}
/* celular: cada imagen con su proporción real, sin recortes */
@media (max-width:47.99rem){
  .reel,.tiles{align-items:start}
  .reel .tile__frame,.tiles .tile__frame,.tiles .tile--wide .tile__frame,.tiles--mov .tile__frame{aspect-ratio:auto}
  .tile img,.tile video{height:auto;object-fit:contain}
  .js .tile[data-rv]{clip-path:inset(6% 0 0 0)}
  .js .tile[data-rv] img,.js .tile[data-rv] video{scale:1}
}
/* imágenes que no se recortan nunca (p. ej. teléfonos) */
.tile--fit{background:#F2F2F2}
.tile--fit img{object-fit:contain}
@media (min-width:48rem){.tile--fit img{height:100%;margin-top:0;translate:none}}
/* fila de tres en computador */
@media (min-width:48rem){.tiles--3{grid-template-columns:repeat(3,1fr)}.tiles--3 .tile__frame{aspect-ratio:9/14}.tiles--3 .tile--wide .tile__frame{aspect-ratio:16/10}}
@media (max-width:47.99rem){.tiles--3 .tile:last-child{grid-column:1/-1}}
/* hero: las líneas del título suben al cargar */
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln > span{display:block;animation:rise 1.1s var(--ease) both}
.hero__title .ln:nth-child(2) > span{animation-delay:.12s}
.hero__sub{animation:fadein 1s .4s var(--ease) both}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.js .tile[data-rv]{clip-path:none}.js .tile[data-rv] img,.js .tile[data-rv] video{scale:1}.tile img,.tile video{translate:none}}
.tiles--mov .tile__cap i{display:none!important}

/* Audiovisual: casillas que alternan videos (siempre 9:16, sin recorte) */
.tiles .tile--slot .tile__frame,.tiles--mov .tile--slot .tile__frame{aspect-ratio:9/16}
.tile__layer{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.tile__layer.is-on{opacity:1}
.tile__layer video{width:100%;height:100%!important;margin:0!important;translate:none!important;object-fit:cover}
.tile--slot .tile__cap{z-index:2;transition:opacity .45s,background .25s,color .25s}
.tile--slot .tile__cap.is-fade{opacity:0}

.tiles--mov{grid-template-columns:repeat(3,1fr)}
@media (max-width:47.99rem){.tiles--mov{gap:6px}.tiles--mov .tile__cap{font-size:.72rem;padding:6px 8px;left:6px;bottom:6px;max-width:calc(100% - 12px)}}


/* contacto, al estilo non.cl: título, bajada y datos en columnas */
.contact__d{margin:18px 0 0;color:var(--fg);font-size:clamp(1.3rem,2.6vw,2rem);font-weight:400;letter-spacing:-.02em;line-height:1.3;max-width:32ch}
.contact__info{display:grid;gap:22px;margin:56px 0 0;padding-top:22px;border-top:1px solid var(--fg)}
.contact__info div{display:grid;gap:2px}
.contact__info dt{font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.contact__info dd{margin:0;font-size:1.2rem;font-weight:500;letter-spacing:-.01em;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 .35em}
.contact__info a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.contact__info a{display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover){.contact__info a:hover{background-size:100% 1px}}
@media (min-width:48rem){.contact__info{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:88px}}

.tile--fit video{object-fit:contain}
@media (min-width:48rem){.tile--fit video{height:100%;margin-top:0;translate:none}}

/* fila de logos (gris) */
.logos ul{align-items:center;gap:56px;padding-right:56px}
.logos li img{display:block;height:calc(var(--h) * .8);width:auto;max-width:none;opacity:.8;transition:opacity .25s}
@media (min-width:48rem){.logos ul{gap:80px;padding-right:80px}.logos li img{height:var(--h)}}
@media (hover:hover){.logos li img:hover{opacity:1}}

/* carrusel infinito de logos: movimiento continuo y suave */
.logos{position:relative}
.logos__track{animation:marquee 70s linear infinite;will-change:transform}
.logos::before,.logos::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.logos::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.logos::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
@media (max-width:47.99rem){.logos__track{animation-duration:55s}.logos::before,.logos::after{width:40px}}

/* etiqueta sobre la banda de logos */
.logos__label{margin-top:56px;margin-bottom:14px;font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--dim)}
.logos__label + .logos{margin-top:0}
@media (min-width:48rem){.logos__label{margin-top:96px;margin-bottom:18px}}

/* página de contacto */
.contact--page{min-height:calc(100svh - var(--nav) - 90px);display:flex;align-items:center;padding-block:64px}
.contact--page .wrap{width:100%}
.nav__cta[aria-current="page"]{background:var(--acc);color:var(--fg)}

/* línea que separa el último bloque de "Conversemos" (igual a la de los datos de contacto) */
.contact:not(.contact--page) .wrap::before{content:"";display:block;border-top:1px solid var(--fg);margin-bottom:var(--sec)}
.contact:not(.contact--page){padding-top:var(--sec)}


/* =========================================================
   Portada v4 — jerarquía y celular
   · la imagen va en su marco y el nombre del proyecto debajo (sin cajas encima)
   · títulos de área más contenidos: el hero manda
   · celular: piezas sin recortar y a la misma altura; filas que se deslizan
   ========================================================= */
.tile{display:flex;flex-direction:column;gap:10px;overflow:visible;background:none!important}
.tile__frame{position:relative;display:block;width:100%;overflow:hidden;background:var(--card)}
.tile--fit .tile__frame{background:#F2F2F2}
.tile__cap{position:static;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;max-width:none;padding:0;background:none!important;font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.tile__cap i{display:inline!important;font-weight:400;color:var(--dim)}
.tiles--mov .tile__cap{font-weight:500}
@media (hover:hover){
  .tile__cap{background-image:none}
  .tile:hover .tile__cap{color:var(--fg)}
  .tile:hover .tile__cap::after{content:"→";font-weight:400;margin-left:2px}
}

/* encabezado de área: línea, número y nombre en una fila */
.area__head{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:14px}
.area__n{margin:0;font-size:.9rem}
.area__t{font-size:clamp(2rem,8.5vw,4.2rem)}
.area__d{grid-column:2;margin-top:8px;font-size:.95rem}
@media (min-width:70rem){.area__head{grid-template-columns:1fr}.area__d{grid-column:1}.area__n{margin-bottom:6px}.area__t{font-size:clamp(2.6rem,3.6vw,4.2rem)}}

/* celular */
@media (max-width:47.99rem){
  .hero{padding-top:36px}
  .reel{display:flex;flex-wrap:wrap;gap:24px 10px;margin-top:32px}
  .reel__a{flex:1 1 100%}
  .reel__b,.reel__c{flex:var(--rg,700) 1 0;min-width:0}
  .reel .tile__frame{aspect-ratio:var(--r,auto)!important}

  .area{padding-top:64px}
  .area__in{gap:20px}
  .tiles{display:flex;flex-wrap:wrap;gap:24px 10px}
  .tiles .tile{flex:var(--rg,800) 1 0;min-width:0}
  .tiles .tile--wide{flex:1 1 100%;order:-1}
  .tiles .tile__frame{aspect-ratio:var(--r,auto)!important}
  .tiles .tile__frame img,.tiles .tile__frame video{height:100%;object-fit:cover}
  .tile--fit .tile__frame img,.tile--fit .tile__frame video{object-fit:contain}

  /* Web y Movimiento: todo hacia abajo, en filas de igual altura (el JS decide los cortes) */
  .tiles__row,.tiles--mov{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:24px 10px}
  .tiles__row .tile,.tiles--mov .tile{flex:var(--rg,563) 1 0;min-width:0}
  .tiles--mov .tile__frame{aspect-ratio:9/16!important}
  .tiles .brk{flex:0 0 100%;height:0;margin-top:-24px}
}
.tiles__row{display:contents}
.tiles .brk{display:none}
@media (max-width:47.99rem){.tiles__row{display:flex}.tiles .brk{display:block}}
.area__in>*,.tiles,.tiles__row{min-width:0}
.tiles--mov .tile__cap{font-size:.95rem!important;padding:0!important}
@media (max-width:47.99rem){.tiles--mov .tile__cap{font-size:.8rem!important}}

/* Movimiento: 4 videos en dos filas (2 × 2), siempre 9:16 */
.tiles.tiles--mov{display:grid!important;grid-template-columns:1fr 1fr;gap:24px 10px}
.tiles--mov .tile{width:auto!important;flex:none!important}
.tiles--mov .tile__frame{aspect-ratio:9/16!important}
@media (min-width:48rem){.tiles.tiles--mov{gap:28px 16px;max-width:760px}}

/* =========================================================
   Detalles en flúor (el mismo color del botón Contacto)
   Sobre blanco el flúor se usa como resaltador, nunca como color de texto.
   ========================================================= */
::selection{background:var(--acc);color:var(--fg)}

/* resaltador que se pinta de izquierda a derecha */
.nav__menu a,.tile__cap b,.contact__info a,.foot nav a,.back,.next__title b,.hl{
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 88%;background-size:0% .5em;transition:background-size .45s var(--ease),color .2s}
.contact__info a{background-position:0 88%!important;background-size:0% .5em}
@media (hover:hover){
  .nav__menu a:hover,.tile:hover .tile__cap b,.contact__info a:hover,.foot nav a:hover,.back:hover,.next:hover .next__title b{background-size:100% .5em!important}
  .tile:hover .tile__cap::after{content:none}
}
/* sección en pantalla: queda marcada en el menú */
.nav__menu a.is-on{background-size:100% .5em;color:var(--fg)}
.tile__cap b{font-weight:600}

/* "Conversemos.": el resaltador pasa por debajo al llegar y al pasar el mouse */
.contact__t .hl{background-position:0 82%;background-size:0% .32em;transition:background-size 1.1s var(--ease)}
.contact__t.is-in .hl,.contact--page .contact__t .hl{background-size:100% .32em;transition-delay:.35s}
@media (hover:hover){.contact__t:hover .hl{background-size:100% .5em}}

/* "Estudio creativo…": punto flúor que late, como un estudio encendido */
.live{display:inline-block;width:.62em;height:.62em;margin-right:.55em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 1px var(--fg);vertical-align:.05em;position:relative}
.live::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--acc);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.6);opacity:0}}

/* número de cada área en una pastilla flúor */
.area__n{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;height:1.5em;padding:0 .4em;background:var(--acc);color:var(--fg);font-size:.78rem;font-weight:600;letter-spacing:.02em;align-self:center}
@media (min-width:70rem){.area__n{justify-self:start}}

/* correo copiado: aviso en flúor */
[data-label]{transition:background .3s}
.is-copied [data-label]{background:var(--acc)}

/* Dr. Fungi en la portada: sin borde ni fondo gris alrededor del video */
.tile--fit .tile__frame{background:#fff;outline:0}
.tile--wide.tile--fit .tile__frame video,.tile--wide.tile--fit .tile__frame img{object-fit:cover}

/* videos: nunca mostrar el botón de play del navegador */
video::-webkit-media-controls,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}