/* ============================================================
   TUUT — portafolio
   Tokens del manual de marca. Mobile first.
   ============================================================ */
:root{
  /* color */
  --base:#020C1A;
  --base-2:#07121f;
  --acc:#B3EE2C;
  --lt:#EAF0F7;
  --dim:#829399;
  --line:#152438;

  /* tipografía */
  --display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --body:'Familjen Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* escala */
  --t-page:clamp(54px,13vw,150px);
  --t-row:clamp(34px,7vw,86px);
  --t-body:clamp(16px,2vw,19px);
  --t-micro:12px;

  /* ritmo */
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(28px,5vw,60px);

  /* movimiento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.18s;
  --slow:.45s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img,video{max-width:100%;height:auto;display:block}
body{background:var(--base);color:var(--lt);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--acc);color:var(--base);padding:10px 16px;z-index:100}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- la carita: siempre cortada, siempre un ojo ---------- */
.carita{position:absolute;pointer-events:none;user-select:none}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:16px var(--pad);position:sticky;top:0;z-index:20;background:rgba(2,12,26,.86);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--fast) var(--ease)}
.nav:hover{border-bottom-color:var(--line)}
.brand{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;color:var(--acc);transition:opacity var(--fast) var(--ease)}
.brand:hover{opacity:.7}
.navlinks{display:flex;align-items:center;gap:22px;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase}
.navlinks a{color:var(--dim);position:relative;padding-bottom:3px;transition:color var(--fast) var(--ease)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform var(--slow) var(--ease)}
.navlinks a:hover{color:var(--acc)}
.navlinks a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- hero ---------- */
.masthead{position:relative;overflow:hidden;text-align:center;padding:clamp(34px,8vw,100px) var(--pad) clamp(34px,7vw,80px)}
.wordmark{font-family:var(--display);font-weight:900;font-size:47vw;line-height:.82;text-indent:-.005em;color:var(--acc);letter-spacing:-.01em;position:relative;z-index:2}
.descriptor{color:var(--lt);font-size:clamp(12px,1.7vw,18px);letter-spacing:.2em;text-transform:uppercase;margin-top:clamp(12px,2vw,24px);position:relative;z-index:2}

.section{padding:0 0 clamp(24px,3vw,48px)}
.pagetitle{font-family:var(--display);font-weight:900;font-size:var(--t-page);line-height:.82;padding:clamp(26px,5vw,60px) var(--pad) clamp(20px,3vw,38px)}

/* ---------- filas de trabajo ---------- */
.rows{display:flex;flex-direction:column}
.row{display:block;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.rowmedia{aspect-ratio:16/10;background:var(--base-2);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform var(--slow) var(--ease)}
.row:hover .rowmedia,.row:focus-visible .rowmedia{transform:scale(1.012)}
.rowmeta{display:flex;align-items:baseline;gap:clamp(12px,2.4vw,32px);padding:14px var(--pad) 28px;flex-wrap:wrap}
.num{font-family:var(--display);font-weight:700;font-size:15px;color:var(--acc)}
.rowmeta h3{font-family:var(--display);font-weight:900;font-size:var(--t-row);line-height:.9;flex-grow:1;transition:color var(--fast) var(--ease),transform var(--slow) var(--ease)}
.row:hover .rowmeta h3{color:var(--acc);transform:translateX(6px)}

.verall{display:inline-block;margin:clamp(22px,3vw,38px) var(--pad) 0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid var(--acc);padding-bottom:3px;transition:gap var(--fast)}
.verall:hover{opacity:.75}

/* ---------- proyecto ---------- */
.proyecto{padding:clamp(20px,4vw,40px) 0 clamp(56px,9vw,110px)}
.crumbs{color:var(--dim);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;padding:0 var(--pad) clamp(18px,3vw,32px)}
.crumbs a:hover{color:var(--acc)}
.proyecto h1{font-family:var(--display);font-weight:900;font-size:var(--t-page);line-height:.82;padding:0 var(--pad)}
.proyecto .player{aspect-ratio:16/9;margin-top:clamp(24px,4vw,46px);background:var(--base-2);display:flex;align-items:center;justify-content:center}
.detalle{max-width:62ch;padding:clamp(24px,4vw,44px) var(--pad) 0}
.detalle .que{font-size:var(--t-body);text-wrap:pretty}
.next{display:inline-block;margin:clamp(36px,6vw,70px) var(--pad) 0;font-family:var(--display);font-weight:900;font-size:clamp(26px,4.5vw,52px);line-height:1;color:var(--acc);transition:transform var(--slow) var(--ease)}
.next:hover{transform:translateX(8px)}

.e404{padding:clamp(60px,14vw,150px) var(--pad)}
.e404 h1{font-family:var(--display);font-weight:900;font-size:clamp(96px,26vw,300px);line-height:.8;color:var(--acc)}
.e404 p{color:var(--dim);margin:16px 0 28px;font-size:var(--t-body)}

/* ---------- pie ---------- */
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:clamp(38px,6vw,70px) var(--pad) clamp(44px,6vw,74px)}
.fdesc{color:var(--dim);font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;margin-top:16px;position:relative;z-index:2}
.flinks{margin-top:12px;font-size:15px;color:var(--dim);position:relative;z-index:2}
.flinks a{color:var(--lt);border-bottom:1px solid var(--line);transition:color var(--fast),border-color var(--fast)}
.flinks a:hover{color:var(--acc);border-bottom-color:var(--acc)}

@media (min-width:900px){
  .rowmedia{aspect-ratio:21/9}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}


/* ---------- proyecto destacado ---------- */
.featured{display:block;border-top:1px solid var(--line)}
.featmedia{aspect-ratio:16/10;background:var(--base-2);display:flex;align-items:center;justify-content:center;overflow:hidden}

.featmeta{display:flex;align-items:baseline;gap:clamp(12px,2.4vw,32px);padding:16px var(--pad) 30px}
.featmeta h2{font-family:var(--display);font-weight:900;font-size:clamp(40px,9vw,110px);line-height:.88;transition:color var(--fast) var(--ease),transform var(--slow) var(--ease)}
.featured:hover .featmeta h2{color:var(--acc);transform:translateX(6px)}
@media (min-width:900px){ .featmedia{aspect-ratio:2.4/1} }

/* ---------- secciones de texto ---------- */
.prose{max-width:70ch;padding:clamp(50px,9vw,110px) var(--pad) 0}
.prose .kicker{color:var(--acc);font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase}
.prose h2{font-family:var(--display);font-weight:900;font-size:clamp(32px,6vw,68px);line-height:.92;margin:14px 0 20px;text-wrap:balance}
.prose p:not(.kicker){color:var(--dim);font-size:var(--t-body);text-wrap:pretty}

/* ---------- pie con TUUT vertical ---------- */
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:clamp(46px,7vw,90px) var(--pad);min-height:clamp(280px,38vw,460px);display:flex;align-items:flex-end}
.fmain{position:relative;z-index:2;padding-left:clamp(0px,14vw,150px)}
.fvert{position:absolute;right:clamp(6px,2vw,34px);bottom:clamp(-10px,-1vw,0px);font-family:var(--display);font-weight:900;font-size:clamp(78px,15vw,190px);line-height:.8;color:var(--acc);writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.02em;z-index:1;pointer-events:none}

/* ---------- media real: previews en lista, player en proyecto ---------- */
.rowmedia video,.featmedia video{width:100%;height:100%;object-fit:cover;display:block}
.rowmedia,.featmedia{background:var(--base-2) center/cover no-repeat}

.player{margin-top:clamp(24px,4vw,46px);background:var(--base-2);display:flex;align-items:center;justify-content:center;aspect-ratio:auto}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player--h{aspect-ratio:16/9;width:100%}
.player--v{aspect-ratio:9/16;height:min(84vh,880px);width:auto;max-width:100%;margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .player--v{height:auto;width:100%}
}


/* ---------- esquinas: apenas redondeadas ---------- */
:root{--r:14px}
.rowmedia,.featmedia{border-radius:var(--r)}
.player{border-radius:var(--r);overflow:hidden}
.player video{border-radius:inherit}

/* ---------- nav: en telefono no se puede salir de la pantalla ---------- */
@media (max-width:520px){
  .nav{padding:14px var(--pad);gap:12px}
  .brand{font-size:26px}
  .navlinks{gap:14px;letter-spacing:.1em;font-size:11px}
}

/* ---------- opcion B: el video se despega de la orilla ----------
   La fila entera se mete var(--pad), asi el filo del video, la linea
   divisoria y el texto quedan alineados al mismo eje (regla de tarjeta). */
.row,.featured{margin-left:var(--pad);margin-right:var(--pad)}
.rowmeta,.featmeta{padding-left:0;padding-right:0}
.verall{margin-left:var(--pad)}

/* ---------- el titulo de la pieza, debajo del cliente ----------
   Con varias piezas por cliente el nombre solo se repite; el titulo
   es lo que distingue una de otra. */
.rowmeta,.featmeta{flex-wrap:wrap}
.rtitle{flex-basis:100%;color:var(--dim);font-size:13px;letter-spacing:.14em;
        text-transform:uppercase;margin-top:-6px}
@media (min-width:900px){
  .rtitle{flex-basis:auto;margin-top:0;align-self:baseline}
}

/* ---------- pie: el TUUT vertical estaba enorme y se cortaba en la orilla ---------- */
.fvert{font-size:clamp(54px,9.5vw,124px);right:clamp(10px,2.5vw,40px);bottom:clamp(8px,1.5vw,22px)}
footer{min-height:clamp(230px,30vw,360px)}

/* ---------- pie mas chico: sobraba alto y el TUUT se cortaba en la orilla ---------- */
footer{min-height:0;padding:clamp(30px,4vw,52px) var(--pad) clamp(34px,4.5vw,58px)}
.fvert{font-size:clamp(38px,6vw,84px);right:clamp(18px,3.5vw,54px);bottom:auto;top:50%;transform:translateY(-50%)}
.fmain{padding-left:clamp(0px,9vw,96px)}

/* ============================================================
   CLARO / OSCURO
   Oscuro es el default de marca. Si el sistema pide claro se cambia solo,
   y el boton del nav manda sobre las dos cosas.
   --acc queda para tipografia GRANDE (el verde sobre blanco no contrasta
   para texto chico); --acc-txt es la version legible para texto chico.
   ============================================================ */
:root{--acc-txt:#B3EE2C}

@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --base:#F2F3EF; --base-2:#E3E6DF; --lt:#16191C; --dim:#5A6165;
    --line:#D5D8D2; --acc-txt:#557A00;
  }
}
:root[data-theme="light"]{
  --base:#F2F3EF; --base-2:#E3E6DF; --lt:#16191C; --dim:#5A6165;
  --line:#D5D8D2; --acc-txt:#557A00;
}

/* el nav translucido tiene que seguir al tema */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .nav{background:rgba(242,243,239,.86)}
}
:root[data-theme="light"] .nav{background:rgba(242,243,239,.86)}

/* texto chico en acento: usa la version legible */
.brand,.num,.kicker,.verall,.navlinks a:hover{color:var(--acc-txt)}
.verall{border-bottom-color:var(--acc-txt)}
.navlinks a::after{background:var(--acc-txt)}
.flinks a:hover{color:var(--acc-txt);border-bottom-color:var(--acc-txt)}

/* boton de tema */
.themebtn{background:none;border:0;padding:0 0 3px;cursor:pointer;color:var(--dim);
  font:inherit;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  transition:color var(--fast) var(--ease)}
.themebtn:hover{color:var(--acc-txt)}
.langsw{color:var(--dim)}

/* ---------- iconos del tema ---------- */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  padding:0;color:var(--dim)}
.themebtn .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:none}
.themebtn .ico--moon{fill:currentColor;stroke:none}
/* en oscuro se ofrece el sol; en claro se ofrece la luna */
.themebtn .ico--sun{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .themebtn .ico--sun{display:none}
  :root:not([data-theme="dark"]) .themebtn .ico--moon{display:block}
}
:root[data-theme="light"] .themebtn .ico--sun{display:none}
:root[data-theme="light"] .themebtn .ico--moon{display:block}
:root[data-theme="dark"] .themebtn .ico--sun{display:block}
:root[data-theme="dark"] .themebtn .ico--moon{display:none}

/* ---------- claro: el verde no aguanta tipografia gigante sobre casi blanco ----------
   El display se va a carbon y el verde se queda en la carita y en los detalles. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .fvert,
  :root:not([data-theme="dark"]) .next{color:var(--lt)}
}
:root[data-theme="light"] .fvert,
:root[data-theme="light"] .next{color:var(--lt)}

/* ---------- aire antes del pie: el ultimo bloque de texto quedaba pegado ---------- */
main{padding-bottom:clamp(56px,8vw,120px)}
.prose + .prose{padding-top:clamp(44px,7vw,90px)}
.proyecto{padding-bottom:clamp(40px,6vw,80px)}

/* ---------- marca apilada TU / UT ---------- */
.brand{display:flex;flex-direction:column;justify-content:center;text-align:center;
       line-height:.86;font-size:clamp(24px,2.4vw,31px);letter-spacing:0;align-self:stretch}

/* ---------- la carita vive en el nav, no en el hero ----------
   El nav es sticky, asi que la cara sigue al scroll. La barra la recorta:
   se ve una franja con UN OJO. El ojo esta al 41% de alto del PNG, por eso
   el translateY va a -41% y no a -50%. */
.nav{overflow:visible}
.carita--nav{
  position:absolute;
  right:0;top:0;
  width:clamp(112px,13vw,180px);
  transform:translate(52%,-26%);
  z-index:0;pointer-events:none;
}
.nav .brand,.nav .navlinks{position:relative;z-index:1}

/* ---------- instagram del cliente, solo si lo tenemos ---------- */
.cig{padding:18px var(--pad) 0;font-size:13px;letter-spacing:.1em}
.cig a{color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:2px;
       transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.cig a:hover{color:var(--acc-txt);border-bottom-color:var(--acc-txt)}

/* ---------- secciones: imagen de un lado, texto del otro, alternando ---------- */
.prose{max-width:none;padding:clamp(50px,8vw,100px) var(--pad) 0;display:grid;gap:clamp(22px,3vw,40px)}
.pfig{margin:0}
.pfig img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);display:block}
.ptxt{max-width:56ch}
@media (min-width:900px){
  .prose{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
         column-gap:clamp(40px,6vw,96px);align-items:center}
  .pfig{grid-row:1;grid-column:1;aspect-ratio:4/3}
  .ptxt{grid-row:1;grid-column:2}
  .prose--flip .pfig{grid-column:2}
  .prose--flip .ptxt{grid-column:1}
}
@media (max-width:899px){
  .pfig{aspect-ratio:16/10}
}

/* ---------- menos hueco entre el bloque de proyectos y la primera seccion ---------- */
.prose{padding-top:clamp(38px,5vw,66px)}
.section{padding-bottom:clamp(14px,2vw,26px)}

/* ---------- pie: los dos textos al mismo tamano ---------- */
.fdesc,.flinks{font-size:13px;letter-spacing:.14em}
.flinks{text-transform:none;letter-spacing:.02em}

/* ---------- cursor: la carita ----------
   Solo en dispositivos con puntero real. El fallback va siempre por si
   el navegador rechaza la imagen. */
@media (hover:hover) and (pointer:fine){
  body{cursor:url(cursor.png) 13 13, auto}
  p,li,dd,td,blockquote,input,textarea{cursor:text}
  a,button,summary,[role="button"]{cursor:url(cursor-lg.png) 20 20, pointer}
  a p,a li,button p{cursor:inherit}
}

/* ---------- hero: el wordmark manda, el descriptor se va a la orilla ----------
   El tamano va en vw puro para que las cuatro letras siempre ocupen la
   misma proporcion del ancho. En telefono el descriptor se va abajo. */
@media (min-width:900px){
  .masthead{display:block;text-align:center;padding-bottom:clamp(24px,3vw,44px)}
  .wordmark{font-size:40vw;line-height:.8;text-indent:-.005em}
  .descriptor{
    position:static;transform:none;margin:clamp(10px,1.4vw,20px) 0 0;
    font-size:11px;letter-spacing:.22em;white-space:nowrap;
    text-align:center;color:var(--dim);
  }
}

/* ---------- la carita del nav se sale 43px del viewport ----------
   El nav necesita overflow visible para que se vea la panza del circulo,
   asi que el corte se hace arriba. clip en vez de hidden: hidden rompe
   el position:sticky del nav. */
html{overflow-x:clip}

/* ---------- titulo de la pieza en la pagina de proyecto ----------
   Estaba en el html sin una sola regla, por eso salia diminuto. */
.ptitle{
  padding:clamp(10px,1.4vw,16px) var(--pad) 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,3.2vw,34px);
  line-height:1;color:var(--acc-txt);
  letter-spacing:.01em;
}

/* ---------- ficha del proyecto: datos a la izquierda, texto a la derecha ---------- */
.ficha{padding:clamp(26px,4vw,46px) var(--pad) 0;display:grid;gap:clamp(20px,3vw,40px)}
.fdl{margin:0;display:grid;gap:9px;align-content:start}
.fdl > div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.fdl dt{color:var(--dim);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
        text-align:right;min-width:5.5em}
.fdl dd{margin:0;font-size:14px;color:var(--lt)}
.ficha .detalle{padding:0;max-width:62ch}
@media (min-width:900px){
  .ficha{grid-template-columns:minmax(0,.36fr) minmax(0,1fr);column-gap:clamp(34px,5vw,80px)}
}

/* ---------- Proyectos: agrupado por cliente y con filas mas chicas ----------
   Se ve mas trabajo de un jalon sin tener que hacer tanto scroll. */
.cgroup{font-family:var(--display);font-weight:900;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt);
  padding:clamp(26px,3.4vw,44px) 0 10px;border-top:1px solid var(--line);
  margin:8px var(--pad) 0}
.rows--work .row:first-of-type{border-top:0}
.rows--work .row{border-top:0}
.rows--work .rowmedia{aspect-ratio:16/7}
.rows--work .rowmeta{padding-top:10px;padding-bottom:16px}
.rows--work .rowmeta h3{font-size:clamp(19px,2.4vw,30px)}
@media (min-width:900px){
  .rows--work .rowmedia{aspect-ratio:3.4/1}
}


/* ---------- nav: la marca centrada de verdad ----------
   Con grid 1fr auto 1fr la columna de los links crece mas que su 1fr y
   empuja la marca. Centrarla en absoluto no depende del ancho de nada. */
.navpad{display:none}
.nav .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media (max-width:620px){
  .nav{justify-content:space-between}
  .nav .brand{position:static;transform:none}
}

/* ---------- la carita del pie: mismo corte que la del nav ----------
   Se corta ARRIBA y la panza del circulo queda completa. Como esta a la
   izquierda, el ojo que se ve es el derecho. */
.carita--foot{
  position:absolute;
  left:0;bottom:clamp(0px,.9vw,13px);top:auto;
  width:clamp(118px,18.7vw,262px);
  transform:translate(-52%,26%);
  z-index:0;pointer-events:none;
}