/* ============================================================================
   EMPORIO IT — sitio del estudio (independiente de At Home)
   ----------------------------------------------------------------------------
   Estética editorial de lujo monocroma: marfil / negro, serif Cormorant
   Garamond + sans Jost, mucho aire y reglas finas. Colores literales (este
   sitio no tiene modo noche).

   Este archivo es la versión AUTÓNOMA del bloque .eg-* que vivía dentro de
   css/styles.css de At Home, donde estaba scoped a #public-screen para ganarle
   al tema de la app. Acá no hay app ni tema: los selectores van sueltos.
   ============================================================================ */

/* ---- Base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:#171717;
  font-family:'Jost','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%}
:focus-visible{outline:2px solid #171717;outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- Logo de marca (wordmark Emporio IT) ----
   La casa minimalista (.emp-house) es del menú de At Home: acá no se usa. */
.emp-logo{display:inline-flex;align-items:center;gap:calc(var(--logo-h,26px)*.36);color:#111;line-height:0}
.emp-logo .emp-word{height:var(--logo-h,26px);width:auto;display:block}

/* ============================================================================
   Portada y Referidos
   ============================================================================ */
.eg-page{
  --ink:#171717; --black:#0E0E0E; --paper:#FFFFFF; --paper-2:#FBFAF8;
  /* El marfil dejo de ser el fondo de la pagina y pasa a ser el tono de la
     tarjeta de cada proyecto: la calidez de la marca sigue estando, pero
     ahora apoyada sobre blanco en vez de al reves. */
  --marfil:#F6F3EE;
  --stone:#8B847A; --stone-2:#A49C90; --line:#E4DED3; --line-2:#D8D1C4;
  --card:#F4F4F3;   /* gris suave: la tarjeta de cada proyecto, sobre blanco */
  --card-2:#E3E0DB; /* un paso más oscuro: la celda "Ver todos" de la portada.
                       Tiene que diferenciarse de --card sin salirse del gris:
                       es la única celda de la grilla que no lleva foto y así
                       se lee como una pieza propia, no como una que falló. */
  font-family:'Jost','Inter',system-ui,sans-serif;
  color:var(--ink); background:var(--paper);
  width:100%; min-height:100vh; -webkit-font-smoothing:antialiased;
  font-weight:400; line-height:1.5; letter-spacing:.1px;
}
.eg-page *{box-sizing:border-box}
.eg-page em{font-style:normal;font-weight:500}

/* ---- Barra de anuncio ---- */
.eg-annc{background:var(--black);color:#F3EFE8;display:flex;justify-content:center;
  align-items:center;gap:14px;flex-wrap:wrap;padding:9px 18px;font-size:10.5px;font-weight:400;
  letter-spacing:2.4px;text-transform:uppercase}
.eg-annc i{font-style:normal;opacity:.5;font-size:9px}

/* ---- Header ---- */
.eg-top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(10px);-webkit-backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--line)}
/* Tres columnas y no un flex con space-between: con flex, la marca queda
   centrada entre sus vecinos, y como la nav de la izquierda es mucho mas ancha
   que el boton de la derecha, el logo terminaba corrido. Con 1fr auto 1fr las
   dos puntas miden igual pase lo que pase y el centro es el centro real. */
.eg-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;max-width:1180px;margin:0 auto;padding:17px 30px}
.eg-bar-nav{display:flex;align-items:center;gap:26px;min-width:0}
.eg-bar-end{display:flex;align-items:center;justify-content:flex-end;gap:24px}
.eg-burger{width:28px;height:18px;background:none;border:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;flex:0 0 auto}
.eg-burger span{display:block;height:1.5px;width:100%;background:var(--ink);transition:.2s}
.eg-burger:hover span{background:var(--stone)}
.eg-brand{display:inline-flex;align-items:center;text-decoration:none;justify-self:center}
.eg-brand .emp-logo{--logo-h:20px}   /* era 30 */
.eg-enter{background:none;border:1px solid var(--ink);color:var(--ink);
  font-family:inherit;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:400;
  padding:11px 20px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.eg-enter:hover{background:var(--ink);color:var(--paper)}
.eg-navbar{display:flex;gap:22px}
.eg-navbar a{color:var(--ink);text-decoration:none;font-size:11.5px;letter-spacing:2.2px;
  text-transform:uppercase;padding:4px 0;position:relative;transition:color .2s;white-space:nowrap}
.eg-navbar a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .25s}
.eg-navbar a:hover{color:var(--ink)}
.eg-navbar a:hover::after{transform:scaleX(1)}
.eg-navbar a.eg-nav-current::after{transform:scaleX(1)}

/* ---- Drawer / menú lateral ---- */
.eg-scrim{position:fixed;inset:0;z-index:60;background:rgba(14,14,14,.44);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.eg-drawer{position:fixed;top:0;left:0;bottom:0;z-index:61;width:min(420px,88vw);
  background:var(--paper);border-right:1px solid var(--line);padding:30px 34px;
  display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.eg-page.eg-menu-open .eg-scrim{opacity:1;visibility:visible}
.eg-page.eg-menu-open .eg-drawer{transform:translateX(0)}
.eg-drawer-head{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.eg-drawer-ttl{font-family:'Cormorant Garamond','GFS Didot',serif;font-size:24px;
  letter-spacing:.5px;color:var(--ink)}
.eg-x{background:none;border:none;font-size:30px;line-height:1;color:var(--ink);
  cursor:pointer;padding:0 4px}
.eg-x:hover{color:var(--stone)}
.eg-drawer-nav{display:flex;flex-direction:column;margin-top:14px}
.eg-drawer-nav a{display:flex;align-items:baseline;gap:16px;text-decoration:none;
  color:var(--ink);font-family:'Cormorant Garamond','GFS Didot',serif;font-size:34px;font-weight:400;
  padding:17px 0;border-bottom:1px solid var(--line);transition:padding-left .2s,color .2s}
.eg-drawer-nav a span{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;
  color:var(--stone-2);font-weight:400}
.eg-drawer-nav a:hover{padding-left:10px;color:var(--stone)}
.eg-drawer-foot{margin-top:auto;padding-top:20px;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--stone)}

/* ---- Hero split ---- */
.eg-hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:84vh}
.eg-hero-txt{display:flex;align-items:center;padding:70px clamp(30px,5vw,88px);
  background:var(--paper)}
.eg-hero-txt-in{max-width:680px}   /* 560 era poco: la frase larga no entraba */
/* El tamanio esta calculado para que CADA frase entre en un solo renglon a
   cualquier ancho, no elegido a ojo. La frase mas larga ("Diseno con
   proposito.") mide 8,6px de ancho por cada px de cuerpo; la columna del hero
   mide mas o menos 0,425 del ancho de la ventana. De ahi sale el 4,6vw, con
   un 7% de margen para que ninguna fuente de respaldo lo haga partir.
   NO se le pone white-space:nowrap a proposito: si algun dia la cuenta falla,
   preferimos que la frase se parta antes que desbordar la pantalla. */
.eg-h1{font-family:'Cormorant Garamond','GFS Didot',serif;font-weight:400;
  font-size:clamp(32px,4.4vw,66px);line-height:1.06;letter-spacing:.2px;color:var(--ink);margin:0 0 26px}
.eg-hero-lead{font-size:16px;line-height:1.75;color:#4A463E;font-weight:300;
  max-width:460px;margin:0 0 36px}
.eg-btn{display:inline-block;background:none;border:1px solid var(--ink);color:var(--ink);
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:2.6px;text-transform:uppercase;font-weight:400;
  padding:16px 42px;cursor:pointer;text-decoration:none;transition:background .25s,color .25s}
.eg-btn:hover{background:var(--ink);color:var(--paper)}
.eg-hero-art{position:relative;background:var(--black);overflow:hidden}
.eg-hero-art::after{content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.14);
  pointer-events:none}
.eg-hero-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;user-select:none;-webkit-user-drag:none}
.eg-hero-cap{position:absolute;left:46px;bottom:48px;color:rgba(255,255,255,.72);
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;line-height:2}
.eg-hero-cap b{color:#fff;font-weight:500}
.eg-rule-light{display:block;width:40px;height:1px;background:rgba(255,255,255,.4);margin-bottom:16px}

/* ---- Secciones genéricas ---- */
.eg-section{max-width:1120px;margin:0 auto;padding:clamp(56px,8vw,104px) 30px;scroll-margin-top:132px}
/* Sin el filete de abajo: el aire ya separa la cabecera del contenido. */
.eg-head{margin-bottom:clamp(36px,5vw,56px);padding-bottom:0}
.eg-head-center{text-align:center}
.eg-eyebrow{display:block;font-size:11px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--stone);margin-bottom:16px}
.eg-h2{font-family:'Jost','Inter',system-ui,sans-serif;font-weight:300;
  font-size:clamp(27px,3.7vw,44px);line-height:1.12;letter-spacing:-.005em;color:var(--ink);margin:0}
.eg-head-lead{max-width:540px;margin:18px auto 0;font-size:15px;line-height:1.7;
  font-weight:300;color:#56514A}

/* ---- Servicios ---- */
/* Las cuatro columnas ya no se separan con filetes verticales ni llevan un
   filete debajo de cada titulo: las separa el espacio. Menos tinta, mismo
   orden de lectura. */
.eg-serv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3.6vw,52px)}
.eg-serv-grid.eg-3{grid-template-columns:repeat(3,1fr)}
.eg-serv-col{padding:0}
.eg-serv-num{display:block;font-size:11px;letter-spacing:2.4px;color:var(--stone-2);margin-bottom:14px}
.eg-serv-title{font-family:'Jost','Inter',system-ui,sans-serif;font-weight:500;
  font-size:16.5px;line-height:1.3;letter-spacing:.01em;color:var(--ink);margin:0 0 10px}
.eg-serv-desc{font-size:14px;line-height:1.75;font-weight:300;color:#56514A;margin:0}
.eg-ref-cta{text-align:center;margin-top:clamp(44px,6vw,68px)}

/* ---- Referidos (versión sobria: centrada, con aire, sin líneas de adorno) ---- */
.eg-ref-hero{max-width:760px;margin:0 auto;text-align:center;
  padding:clamp(76px,13vw,150px) 30px clamp(56px,9vw,92px)}
.eg-ref-kicker{display:block;font-size:11px;letter-spacing:3.4px;text-transform:uppercase;
  color:var(--stone);margin-bottom:28px}
.eg-ref-h1{font-family:'Cormorant Garamond','GFS Didot',serif;font-weight:400;
  font-size:clamp(42px,6.4vw,80px);line-height:1.02;letter-spacing:.3px;color:var(--ink);margin:0 0 30px}
.eg-ref-lead{font-size:16.5px;line-height:1.8;font-weight:300;color:#4A463E;
  max-width:540px;margin:0 auto 40px}
.eg-ref-steps-sec{max-width:1040px;margin:0 auto;
  padding:clamp(32px,6vw,64px) 30px clamp(80px,12vw,128px)}
.eg-ref-h2{font-family:'Cormorant Garamond','GFS Didot',serif;font-weight:400;
  font-size:clamp(28px,4vw,46px);line-height:1.04;color:var(--ink);text-align:center;
  margin:0 0 clamp(44px,6vw,70px)}
.eg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,5vw,66px)}
.eg-step{text-align:center}
.eg-step-num{display:block;font-family:'Cormorant Garamond','GFS Didot',serif;
  font-size:40px;font-weight:400;color:var(--stone-2);line-height:1;margin-bottom:16px}
.eg-step-title{font-family:'Cormorant Garamond','GFS Didot',serif;font-weight:500;
  font-size:24px;line-height:1.15;color:var(--ink);margin:0 0 12px}
.eg-step-desc{font-size:14.5px;line-height:1.72;font-weight:300;color:#56514A;
  max-width:300px;margin:0 auto}
@media(max-width:720px){
  .eg-steps{grid-template-columns:1fr;gap:46px}
}

/* ---- Trabajo (planchas editoriales) ---- */
/* Grilla de tarjetas chicas, no una plancha por pantalla: el pedido fue poder
   ver varios proyectos al mismo tiempo. Tres columnas en escritorio, dos en
   tablet y una en celular. */
.eg-plates{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2vw,26px)}

/* Cada proyecto adentro de una tarjeta. La define el COLOR, no un filete:
   blanco sobre el marfil de la pagina. Es la diferencia mas suave que se
   puede ver, y alcanza para que el ojo lea "esto es una pieza". Un borde
   habria sumado justo las lineas que sacamos en el resto de la portada. */
.eg-plate{display:flex;flex-direction:column;
  background:var(--card);border-radius:6px;padding:12px;
  transition:background .25s ease}

/* 16/9 y no 16/10: las capturas SON 16/9 (1280x720), asi que con esta
   proporcion entran enteras y no se les recorta nada de los costados. Antes se
   perdia un 10% del ancho, que en un pantallazo de sistema es justo donde
   viven el menu o los botones. Las dos que son mas anchas (1280x660) recortan
   un poco, centradas, que es lo minimo posible. */
.eg-plate-img{overflow:hidden;background:#ECE7DE;border-radius:4px;aspect-ratio:16/9}
.eg-plate-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.eg-plate:hover .eg-plate-img img{transform:scale(1.035)}

.eg-plate-txt{display:flex;flex-direction:column;flex:1 1 auto;padding:13px 4px 4px}
/* El numero y la etiqueta, juntos en un renglon: antes el numero era una cifra
   serif de 30px que en una tarjeta chica se comia el espacio del titulo. */
.eg-plate-meta{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.eg-plate-num{font-family:'Cormorant Garamond','GFS Didot',serif;font-size:11px;color:var(--stone-2);letter-spacing:1px}
.eg-plate-tag{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--stone)}
.eg-plate-title{font-family:'Cormorant Garamond','GFS Didot',serif;font-weight:400;
  font-size:24px;line-height:1.1;color:var(--ink);margin:0 0 9px}
.eg-plate-desc{font-size:13.5px;line-height:1.65;font-weight:300;color:#4F4A43;
  max-width:none;margin:0 0 14px}
.eg-plate-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid var(--ink);align-self:flex-start;margin-top:auto}
.eg-plate-link span{font-size:14px;transition:transform .2s}
.eg-plate-link:hover span{transform:translate(2px,-2px)}
.eg-plate-link.eg-soon{color:var(--stone-2);border-bottom-color:var(--line-2);cursor:default}


/* ---- Footer / contacto ---- */
.eg-foot{background:var(--black);color:#D7D2C8}
.eg-foot-cta{text-align:center;padding:clamp(70px,11vw,128px) 30px;border-bottom:1px solid rgba(255,255,255,.1)}
.eg-eyebrow-light{color:rgba(255,255,255,.55)}
/* "Hablemos" va en Jost, no en la serif. A pedido del dueño: la clásica a 96px
   ocupaba media pantalla y saturaba la banda de contacto.
   Dos cosas cambian junto con la tipografía, y las dos son necesarias: baja a
   60px (una sans de ese cuerpo pesa mucho más que una serif del mismo tamaño,
   porque los trazos son parejos y no afinan) y el espaciado entre letras pasa
   a negativo. Lo segundo es lo que la hace ver moderna: en un titular grande
   las letras de palo seco quedan sueltas, y juntarlas un punto las arma como
   un bloque. Este archivo usa espaciado POSITIVO en las etiquetas chiquitas
   en mayúscula, que es el caso inverso: ahí separa, acá junta. */
.eg-foot-h{font-weight:300;
  font-size:clamp(34px,6vw,60px);line-height:1.05;color:#fff;margin:0 0 34px;
  letter-spacing:-.5px}
.eg-btn-light{border-color:rgba(255,255,255,.55);color:#fff}
.eg-btn-light:hover{background:#fff;color:var(--black)}
.eg-foot-bar{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;padding:30px}
.eg-foot-logo .emp-logo{--logo-h:24px;filter:brightness(0) invert(1)}
.eg-foot-copy{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ---- Responsive ---- */
@media(max-width:1000px){
  .eg-plates{grid-template-columns:repeat(2,1fr)}
  .eg-serv-grid{grid-template-columns:1fr 1fr;gap:44px 40px}
}
@media(max-width:780px){
  .eg-serv-grid.eg-3{grid-template-columns:1fr;gap:38px}
}
/* Con la marca centrada, las dos columnas laterales miden lo mismo, así que la
   nav necesita de un lado el ancho que necesita del otro. Los cuatro enlaces
   dejan de entrar por debajo de ~1100px: ahí pasan a la hamburguesa, que abre
   el mismo menú completo. Antes este corte estaba en 820px, cuando la marca
   vivía a la derecha y la nav tenía toda la izquierda para ella sola. */
@media(max-width:1100px){
  .eg-navbar{display:none}
}
@media(max-width:820px){
  .eg-hero{grid-template-columns:1fr}
  .eg-hero-art{min-height:52vh;order:-1}
  .eg-plates{grid-template-columns:1fr}
}
@media(max-width:560px){
  .eg-bar{padding:14px 18px;position:relative}
  .eg-brand .emp-logo{--logo-h:16px}
  /* EN EL TELEFONO LA GRILLA NO ALCANZA PARA CENTRAR LA MARCA.
     Con `1fr auto 1fr`, una columna de 1fr igual crece si su contenido no
     entra: "Ingresar" mide 87px y la hamburguesa 28, asi que la de la derecha
     se queda con mas lugar y el medio de la grilla deja de ser el medio de la
     pantalla (en un celular de 390px, la marca quedaba 27px corrida).
     Sacandola del flujo queda clavada en el centro, mida lo que mida el resto. */
  .eg-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  /* Al salir del flujo, la marca deja de ocupar la columna del medio y la
     grilla la reparte entre los dos que quedan. Con tres columnas, "Ingresar"
     se corria al centro y se montaba sobre el logo; con dos, queda donde tiene
     que estar: la hamburguesa a la izquierda y el boton a la derecha. */
  .eg-bar{grid-template-columns:1fr 1fr}
  /* Y el boton se achica para dejarle el medio libre a la marca. */
  .eg-enter{font-size:10px;letter-spacing:1.4px;padding:11px 14px}
  .eg-serv-grid{grid-template-columns:1fr;gap:38px}
  .eg-hero-txt{padding:52px 24px}
  .eg-foot-bar{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .eg-drawer,.eg-plate-img img,.eg-scrim{transition:none}
}


/* ============================================================================
   CONTACTO: WHATSAPP
   ============================================================================
   El numero va como boton en el pie y, ademas, escrito a la vista: mucha gente
   lo quiere copiar para agendarlo, no abrir el chat ahi mismo.
   El contacto es SOLO WhatsApp: no se publica ninguna casilla de mail.
   ============================================================================ */

.eg-foot-acciones{display:flex;flex-direction:column;align-items:center;gap:20px}
.eg-foot-vias{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:12.5px;letter-spacing:.4px}
.eg-foot-vias a{color:rgba(255,255,255,.72);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.eg-foot-vias a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.eg-foot-vias a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* El pie del menu lateral pasa de una linea de texto a dos vias de contacto. */
.eg-drawer-foot{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
/* La regla vieja ponia MAYUSCULAS y 2px de tracking a todo el pie: servia para
   una etiqueta suelta, pero un email en mayusculas no se lee ni se copia bien.
   Y el gris piedra (#8B847A) sobre blanco no llega al contraste minimo para
   texto chico: para algo en lo que hay que hacer clic, se oscurece. */
.eg-drawer-foot a{color:#5F5A54;text-decoration:none;text-transform:none;
  letter-spacing:.2px;font-size:12.5px;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.eg-drawer-foot a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.eg-drawer-foot a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media(max-width:560px){
  /* De parado y con una mano: el numero tiene que ser facil de apretar. */
  .eg-foot-vias{flex-direction:column;gap:14px}
}


/* ============================================================================
   LA BANDA NEGRA DE SERVICIOS
   ============================================================================
   Pedido: que toda la zona de Servicios sea una franja negra de lado a lado,
   con el texto en blanco, para cortar el blanco continuo de la pagina.

   Va en un envoltorio propio y no en .eg-section porque la seccion esta
   limitada a 1120px: si se le pintara el fondo ahi, el negro terminaria en el
   borde del contenido en vez de llegar a las dos puntas de la pantalla.

   Queda un ritmo blanco -> negro -> blanco -> negro (el pie), que es lo que
   hace que la pagina deje de ser monotona.
   ============================================================================ */

.eg-banda{
  background:var(--black);
  scroll-margin-top:132px;
}
/* El scroll frena en la banda, no adentro: si no, el ancla salta por debajo
   del borde y el negro aparece cortado arriba. */
.eg-banda .eg-section{ scroll-margin-top:0; }

/* Los textos, invertidos. Las opacidades estan elegidas para que TODAS pasen
   el contraste minimo sobre el negro, incluida la numeracion de 11px. */
.eg-banda .eg-h2{ color:#FFFFFF; }
.eg-banda .eg-eyebrow{ color:rgba(255,255,255,.66); }
.eg-banda .eg-serv-title{ color:#FFFFFF; }
.eg-banda .eg-serv-desc{ color:rgba(255,255,255,.78); }
.eg-banda .eg-serv-num{ color:rgba(255,255,255,.60); }
.eg-banda .eg-head-lead{ color:rgba(255,255,255,.78); }

/* Por si alguna vez entra un boton o un enlace a la banda. */
.eg-banda .eg-btn{ border-color:rgba(255,255,255,.55); color:#FFFFFF; }
.eg-banda .eg-btn:hover{ background:#FFFFFF; color:var(--black); }
.eg-banda a:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }


/* ============================================================================
   EL MANIFIESTO, AHORA EN EL PIE DE CONTACTO
   ============================================================================
   Dejo de ser una seccion suelta en el medio de la pagina y se mudo al bloque
   de contacto, entre "Hablemos" y el boton de WhatsApp: es una promesa, y una
   promesa se lee mejor justo antes de invitar a escribir.

   Va mas chico que cuando vivia solo. Antes competia con el hero; aca tiene que
   acompaniar al "Hablemos", no pelearle.
   ============================================================================ */

.eg-foot-manifiesto{
  font-size:clamp(15.5px,1.8vw,20px);
  line-height:1.65;
  font-weight:300;
  color:rgba(255,255,255,.82);
  max-width:600px;
  margin:0 auto clamp(26px,3.5vw,36px);
  letter-spacing:.01em;
}

/* El titulo traia el aire de cuando el boton venia pegado abajo. Ahora entre
   los dos hay un parrafo, asi que ese espacio sobra. */
.eg-foot-cta .eg-foot-h{ margin-bottom:clamp(18px,2.4vw,24px); }


/* ============================================================================
   APARICIONES AL BAJAR
   ============================================================================
   Los bloques entran con una subida corta y un fundido. Nada mas: en una marca
   editorial, una animacion que se nota es una animacion que sobra. 14px de
   recorrido y 0,7s; lo justo para que el ojo registre que algo llego.

   TRES COSAS QUE PODRIAN ARRUINARLO, Y COMO SE EVITAN:

   1. Que el JavaScript falle y la pagina quede en blanco. Todo esto cuelga de
      `.js-anim`, una clase que agrega un script en el <head>. Sin JS no se
      agrega, no se esconde nada y la pagina se ve entera. El contenido nunca
      depende de que una animacion funcione.

   2. El parpadeo. Por eso la clase se agrega ANTES de pintar y no al final del
      body: si no, el texto aparece, se esconde de golpe y vuelve.

   3. Marear a quien pidio no marearse. `prefers-reduced-motion` no lo acelera:
      lo APAGA. Hay gente a la que el movimiento le da nauseas de verdad.

   Solo se animan `opacity` y `transform`, que el navegador resuelve en la placa
   de video. Animar `top` o `height` obliga a recalcular la pagina en cada
   cuadro y se entrecorta.
   ============================================================================ */

.js-anim .eg-aparece{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--retardo,0ms);
}
.js-anim .eg-aparece.es-visible{
  opacity:1;
  transform:none;
}

/* La imagen de cada proyecto entra con un acercamiento minimo, que se suelta
   cuando la tarjeta llega. Da sensacion de profundidad sin mover nada de lugar. */
.js-anim .eg-plate .eg-plate-img img{ transform:scale(1.04); }
.js-anim .eg-plate.es-visible .eg-plate-img img{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .js-anim .eg-aparece,
  .js-anim .eg-aparece.es-visible,
  .js-anim .eg-plate .eg-plate-img img{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* ============================================================================
   ZONAS TOCABLES DE 44px
   ============================================================================
   En el telefono lo que apreta es un dedo, no un puntero: abajo de 44px se
   falla el tiro. El problema es que varias de estas piezas TIENEN que seguir
   viendose chicas — tres rayitas de 28x18, una cruz, un enlace subrayado.

   Asi que la zona tocable se agranda SIN agrandar el dibujo, de dos maneras:

   a) Con padding y un margen negativo que lo devuelve (hamburguesa y cruz).
      Va `box-sizing:content-box` a proposito: con el border-box de la base, el
      padding comeria las medidas del dibujo en vez de rodearlo.

   b) Con un rectangulo invisible centrado sobre el enlace (::after), para los
      enlaces de texto. Si en vez de eso se les pusiera min-height, el
      subrayado — que es el borde de abajo de la caja — se despegaria del texto.
   ============================================================================ */

.eg-burger{
  box-sizing:content-box;
  padding:13px 8px;    /* 28+16 x 18+26 = 44 x 44 */
  margin:-13px -8px;   /* y el lugar que ocupa en la barra no cambia */
}
.eg-x{
  width:44px;height:44px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  margin:-7px -9px -7px 0;   /* la cruz queda donde estaba, pegada al borde */
}
.eg-brand{min-height:44px}
.eg-enter{display:inline-flex;align-items:center;justify-content:center;min-height:44px}

/* Hasta tablet, que es donde se toca con el dedo. */
@media(max-width:1000px){
  .eg-plate-link,.eg-foot-vias a,.eg-drawer-foot a{position:relative}
  .eg-plate-link::after,.eg-foot-vias a::after,.eg-drawer-foot a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
}

/* Abajo de 356px (un iPhone SE de primera, o un Android viejo) el logo
   centrado y el boton quedan a 4px de pisarse: 126 de logo + 2x87 de boton
   + aire no entran en el ancho util. Ahi la marca vuelve al flujo — queda
   apenas corrida a la izquierda, como estaba antes, pero NADA se monta sobre
   nada. Preferimos descentrado antes que encimado. */
@media(max-width:355px){
  .eg-brand{position:static;transform:none}
  .eg-bar{grid-template-columns:1fr auto 1fr}
}

/* El pedido es que cada frase del titular entre en UN renglon, siempre.
   Abajo de 340px deja de cumplirse: "Diseno con proposito." necesita 275px
   (8,6px por cada px de cuerpo x 32) y en un celular de 320 quedan 272 libres.
   Dos puntos menos de cuerpo y vuelve a entrar. Arriba de 340 no cambia nada. */
@media(max-width:340px){
  .eg-h1{font-size:29px}
}


/* ============================================================================
   8) LA PORTADA ALIVIANADA Y LA PÁGINA DE PROYECTOS
   ============================================================================
   PARA QUÉ ES ESTE BLOQUE.
   La portada mostraba los ocho proyectos uno abajo del otro y quedaba
   larguísima. Ahora muestra cinco y una sexta celda que lleva a
   `proyectos.html`, donde están todos y con las imágenes grandes.

   Son dos piezas y nada más:
     a) `.eg-plate-todos` — la sexta celda de la grilla de la portada.
     b) `.eg-pr-*`        — lo propio de proyectos.html.

   NO HAY CLASES NUEVAS PARA EL HERO NI PARA EL TÍTULO DE "TODOS LOS PROYECTOS".
   Esa página reusa `.eg-ref-hero`, `.eg-ref-kicker`, `.eg-ref-h1`, `.eg-ref-lead`
   y `.eg-ref-h2`, que son las de Referidos. Es a propósito, no un descuido: es
   el mismo hero sobrio y centrado, y si algún día se retoca uno queremos que
   cambie el otro. Lo mismo con las tarjetas (`.eg-plate`) y con los enlaces
   (`.eg-plate-link`): la lista completa es la MISMA grilla de la portada, así
   que hereda hasta la zona tocable de 44px del bloque 7.
   ============================================================================ */


/* ---- a) LA SEXTA CELDA: "VER TODOS" ----------------------------------------
   El riesgo de poner una celda sin foto en una grilla de fotos es que se lea
   como una imagen que no cargó. Se resuelve con el color: un gris un paso más
   oscuro que el de las tarjetas, así el vacío es una decisión y no una falta.
   Antes esto era negro con un filete por dentro. Lo negro competía con la
   banda de Servicios y con el pie, y el filete leía como un marco pegado
   encima del recuadro. Las dos cosas se sacaron a pedido del dueño: ahora es
   una sola superficie lisa, sin nada dibujado adentro.
   El texto va en el registro minimalista de la casa — Jost, chico, en
   mayúscula y con aire entre letras — el mismo de "VER LA DEMO" de las
   tarjetas de al lado. */
.eg-plate-todos{
  background:var(--card-2);
  color:var(--ink);
  text-decoration:none;            /* es un <a>: sin esto viene subrayado */
  align-items:center;              /* pisa el flex-direction:column de .eg-plate */
  justify-content:center;
  transition:background-color .25s ease;
  /* Cuando comparte fila con tarjetas, la grilla la estira sola. Pero en el
     celular queda sola en su fila y sin esto se achicaría al alto del texto:
     parecería un botón perdido, no una plancha más. */
  min-height:clamp(190px,46vw,260px);
}
/* Único gesto al pasar por encima: la superficie se oscurece un punto más.
   Sin esto la celda no se siente apretable, porque ya no tiene subrayado ni
   borde que puedan reaccionar. */
.eg-plate-todos:hover{background:#D8D4CE}
.eg-todos-in{display:inline-flex;align-items:center;gap:10px}
.eg-todos-ttl{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;line-height:1}
.eg-todos-flecha{display:inline-block;font-size:14px;transition:transform .25s ease}
.eg-plate-todos:hover .eg-todos-flecha{transform:translate(3px,-3px)}
.eg-plate-todos:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* EN UNA SOLA COLUMNA LA CELDA SE QUEDABA A MEDIO PALO.
   En escritorio comparte fila y la grilla la estira sola: mide exactamente lo
   mismo que sus compañeras. En el celular queda sola al final de la columna, y
   con el minimo de arriba daba 190px contra los ~390px de las tarjetas. Como
   abajo sigue el pie, que es del MISMO negro, el resultado era un sandwich
   negro-rayita-negro: se leia como un pedazo suelto del pie y no como la sexta
   plancha de la grilla.
   Dos cosas lo arreglan: que mida parecido a una tarjeta, y que haya aire de
   verdad entre la grilla y el pie para que se vean como dos bloques distintos. */
@media(max-width:820px){
  .eg-plate-todos{min-height:clamp(300px,82vw,340px)}
  .eg-work-sec{padding-bottom:clamp(76px,16vw,110px)}
}


/* ---- b) PROYECTOS.HTML -----------------------------------------------------
   b.1) Las imágenes grandes.
   EL ANCHO ESTÁ ATADO AL ARCHIVO, NO AL GUSTO. Las capturas miden 1280px de
   ancho y no hay otras. Si la caja pidiera más, el navegador las agranda y se
   ven blandas: una foto grande y borrosa queda peor que una chica y nítida.
   1000px de caja menos 30px de aire de cada lado = 940px de imagen como mucho,
   siempre por debajo de los 1280 reales. */
/* b.0) El hero de esta página, más corto que el de Referidos.
   Hereda todo de `.eg-ref-hero` y sólo le baja el aire. Motivo: acá el hero no
   tiene que lucirse, tiene que correrse. Es un cartel de una línea ("estás en
   Proyectos") y abajo está lo que la gente vino a ver. Con el aire de
   Referidos, la primera pantalla era el título solo y la primera imagen apenas
   asomaba. Como además le sacamos la bajada, el `margin-bottom` del h1 ya no
   separa de nada y sobra. */
.eg-pr-hero{padding:clamp(56px,9vw,104px) 30px clamp(36px,5vw,56px)}
.eg-pr-hero .eg-ref-h1{margin-bottom:0}

.eg-pr-bigs{
  max-width:1000px;margin:0 auto;
  padding:clamp(6px,1.5vw,20px) 30px clamp(56px,8vw,96px);
  display:flex;flex-direction:column;gap:clamp(60px,9vw,110px);
}
/* 16/9 y recorte centrado, igual que en la portada. OJO: no todas las capturas
   son 1280x720 — `muestra-athome.jpg` y `muestra-bottega.jpg` son 1280x660 y
   recortan unos píxeles arriba y abajo. Por eso la caja fija la proporción y
   la imagen va con object-fit: así las dos medidas conviven sin deformarse. */
.eg-pr-big-img{overflow:hidden;background:#ECE7DE;border-radius:4px;aspect-ratio:16/9}
.eg-pr-big-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.eg-pr-big-txt{padding-top:clamp(20px,2.6vw,28px)}
.eg-pr-big .eg-plate-meta{margin-bottom:12px}
.eg-pr-big-title{font-family:'Cormorant Garamond','GFS Didot',serif;font-weight:400;
  font-size:clamp(32px,4.6vw,52px);line-height:1.04;letter-spacing:.2px;
  color:var(--ink);margin:0 0 14px}
.eg-pr-big-desc{font-size:15.5px;line-height:1.75;font-weight:300;color:#4F4A43;
  max-width:620px;margin:0 0 22px}

/* b.2) La filosofía, dentro de la banda negra.
   El manifiesto hace de título: es la frase que ya está en el pie de la
   portada, acá en grande. Por eso no lleva volanta ni otro título encima —
   sería anunciar con una frase nueva algo que ya se explica solo.
   La banda lleva MÁS aire que una sección normal porque adentro hay una sola
   frase: una pausa a pantalla completa entre la vidriera y el índice. Con el
   padding de `.eg-section` la frase quedaba apretada contra los bordes del
   negro y parecía que faltaba algo abajo. */
.eg-pr-filo .eg-section{padding:clamp(76px,11vw,140px) 30px}
/* El manifiesto va en Jost, NO en la serif de los títulos. A pedido del dueño:
   la serif a 48px llenaba la banda entera y saturaba. Una frase larga en
   tipografía clásica y tamaño de titular se lee como una proclama; en sans
   liviana se lee como lo que es, una forma de trabajar contada en voz baja.
   Por eso además baja de 48 a 34px y sube el interlineado: el aire entre
   renglones hace el trabajo que antes hacía el tamaño. */
.eg-pr-manifiesto{
  font-weight:300;
  font-size:clamp(19px,2.5vw,34px);line-height:1.5;letter-spacing:.2px;
  color:#FFFFFF;text-align:center;
  /* Sin margen abajo: antes separaba de las cuatro columnas de Servicios que
     había acá. Ya no hay nada debajo, así que sería aire muerto. */
  max-width:880px;margin:0 auto;
}

/* b.3) La lista completa. */
.eg-pr-all{max-width:1120px;margin:0 auto;padding:clamp(56px,8vw,104px) 30px}
/* El renglón del conteo lo llena el JS contando las tarjetas que hay de verdad.
   Si el JS no corre queda vacío, y `:empty` lo esconde: nunca se ve un "  en
   total" a medio escribir. El gris piedra de las volantas no llega al
   contraste mínimo en 11px, así que acá va el mismo gris oscuro que ya usa el
   pie del menú lateral por ese motivo. */
.eg-pr-cuenta{text-align:center;font-size:11px;letter-spacing:3.2px;
  text-transform:uppercase;color:#5F5A54;margin:0 0 16px}
.eg-pr-cuenta:empty{display:none}

/* b.4) La vuelta a la portada, al final de todo. */
.eg-pr-volver{display:flex;justify-content:center;padding:0 30px clamp(76px,11vw,118px)}
.eg-pr-volver a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:border-color .2s}
.eg-pr-volver a:hover{border-bottom-color:var(--ink)}
.eg-pr-volver a span{display:inline-block;transition:transform .2s}
.eg-pr-volver a:hover span{transform:translateX(-4px)}

@media(prefers-reduced-motion:reduce){
  .eg-plate-todos,.eg-todos-flecha,.eg-pr-volver a span{transition:none}
}