/* ============================================================
   FUENTE PROPIA — Raleway
   Los archivos viven en la carpeta /fonts (un nivel arriba de este CSS).
   Pedile al vendedor los formatos .woff2 y .woff (licencia webfont).
   ============================================================ */
@font-face{
  font-family:'Raleway';
  /* Poné el archivo de Raleway Variable en /fonts con ALGUNO de estos nombres.
     El navegador usa el primero que encuentre (woff2 es el más liviano y recomendado). */
  src:url('../fonts/Raleway-VariableFont_wght.ttf')   format('truetype');
  font-weight:200;          /* Extra Light */
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --papel:#ffffff;
  --tinta:#131313;
  --grisOscuro:#3d3d3d;
  --gris:#8c8c8c;
  --linea:#e3e1de;
  --hormigon:#f4f2ef;
  --blanco:#ffffff;

  --display:'Raleway', 'Jost', 'Century Gothic', sans-serif;   /* Raleway en todo el texto de marca/menú/títulos */
  --titular:'Raleway', 'Jost', Georgia, serif;   /* fuente de los títulos */
  --texto:'IBM Plex Sans', system-ui, sans-serif;
  --ficha:'IBM Plex Mono', monospace;

  --marco: clamp(20px, 4.5vw, 64px);
  --tope: calc(var(--marco) * 2 + 40px);  /* alto del header (padding + logo) */
  --pie: 60px;                             /* alto de la barra de rubros */
  --lonja: 165px;          /* alto en reposo en celular: banda; al tocar se ve la foto entera */
  --lonja-abierta: 400px;  /* alto de la lonja al pasar el mouse */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ciclo: 2s;             /* duración total de la secuencia de la portada */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:1px solid var(--tinta);outline-offset:4px}

/* Texto que NO se ve pero que sí leen Google y los lectores de pantalla.
   Se usa para los títulos que el diseño no muestra (por ejemplo el título
   real de la portada, donde el lema va en inglés). No usar display:none:
   eso lo esconde también de los lectores. */
.solo-lectores{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ============================================================
   MARCA — la "r" invertida arma la esquina
   ============================================================ */
.marca{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(30px,5.5vw,54px);
  letter-spacing:.06em;
  line-height:1;
  display:inline-flex;
  text-transform:lowercase;
}
.marca i{font-style:normal;display:inline-block}
.marca .giro{transform:rotate(180deg)}
/* Logo real: alto como el texto anterior, ancho automático.
   invert(1) lo pasa a blanco para que el mix-blend-mode:difference
   del header lo haga adaptativo (blanco sobre fondo oscuro, oscuro sobre claro). */
.marca img{
  width:auto;
  height:clamp(30px,3.6vw,42px);   /* un poco más grande: la "c" ≈ los tres puntitos */
  filter:invert(1);
}

/* ============================================================
   HEADER FIJO
   ============================================================ */
.tope{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--marco);
  mix-blend-mode:difference;
  pointer-events:none;
}
.tope > *{pointer-events:auto}
.tope .marca{color:#fff}

.puntos{
  background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  padding:6px 10px;margin-left:-10px;
}
.puntos span{
  width:6px;height:6px;border-radius:50%;
  background:#fff;
  transition:transform .35s var(--ease);
}
.puntos:hover span:nth-child(1){transform:translateX(4px)}
.puntos:hover span:nth-child(3){transform:translateX(-4px)}

/* ============================================================
   MENÚ (los tres puntitos)
   ============================================================ */
.menu{
  position:fixed;inset:0;z-index:55;
  background:var(--papel);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--marco) * 2.6) var(--marco) var(--marco);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  overflow-y:auto;
}
.menu[data-abierto="true"]{clip-path:inset(0 0 0 0)}
.menu ol{list-style:none}
.menu li{
  overflow:hidden;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.menu[data-abierto="true"] li{opacity:1;transform:none}
.menu[data-abierto="true"] li:nth-child(1){transition-delay:.16s}
.menu[data-abierto="true"] li:nth-child(2){transition-delay:.21s}
.menu[data-abierto="true"] li:nth-child(3){transition-delay:.26s}
.menu[data-abierto="true"] li:nth-child(4){transition-delay:.31s}
.menu[data-abierto="true"] li:nth-child(5){transition-delay:.36s}
.menu[data-abierto="true"] li:nth-child(6){transition-delay:.41s}
.menu[data-abierto="true"] li:nth-child(7){transition-delay:.46s}
.menu a{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(22px,4vw,34px);
  letter-spacing:.03em;
  line-height:1.28;
  display:block;
  transition:padding-left .4s var(--ease), color .4s var(--ease);
}
.menu a:hover{padding-left:.28em;color:var(--gris)}

.cerrar{
  position:absolute;bottom:var(--marco);right:var(--marco);
  background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:200;
  font-size:clamp(26px,3.4vw,38px);line-height:1;
  color:var(--tinta);padding:4px 8px;
}

/* ============================================================
   PORTADA
   ============================================================ */
.portada{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  justify-content:center;              /* centra el cuadro en la zona libre */
  /* reserva el header arriba y los rubros abajo; sin padding lateral: el gif va full-width */
  padding:var(--tope) 0 var(--pie);
  overflow:hidden;
  animation:entrar 1s var(--ease) both;
}
@keyframes entrar{from{opacity:0}to{opacity:1}}

/* ---- CUADRO: el gif ocupa todo el ancho y todo el alto libre entre header y rubros.
   Es "container" para que el título se mida contra él (unidades cqw/cqh). ---- */
.cuadro{
  position:relative;
  align-self:stretch;          /* full-width */
  width:100%;                  /* todo el ancho de la pantalla */
  height:calc(100svh - var(--tope) - var(--pie));  /* todo el alto libre entre header y rubros */
  container-type:size;         /* habilita cqw (ancho) y cqh (alto) del título */
  overflow:hidden;
}
.cuadro .fondo{position:absolute;inset:0;z-index:0}
/* La portada es un video .mp4 (antes era un .gif de 57 MB: mismo cuadrado, misma
   secuencia, pero ~1,7 MB). Va mudo y en loop infinito para que arranque solo. */
.cuadro .fondo img,
.cuadro .fondo video{width:100%;height:100%;object-fit:cover}

/* ---- EL TÍTULO ---- Blanco liso, adentro del cuadro. Se mide en cqw/cqh (relativo al cuadro),
   así toda la composición entra siempre dentro del gif. 84px ÷ 1350 = 6.22cqw. */
.lema{
  position:absolute;inset:0;z-index:2;
  margin:0;
  display:flex;flex-direction:column;justify-content:center;
  font-family:var(--display);font-weight:200;  /* Raleway Variable (ya viene en --display; Jost de respaldo) */
  /* la letra se limita por el ANCHO (6.22cqw) y por el ALTO de la banda (16cqh),
     así los 5 renglones nunca se cortan en pantallas anchas y bajas. */
  font-size:min(6.22cqw, 16cqh);
  line-height:1.07;letter-spacing:.01em;
  color:#fff;
}
/* Cada renglón es editable por separado desde el HTML (ver .lema en index.html):
   --al  = alineación del texto (left | right | center)
   --izq = margen a la izquierda del renglón (en cqw = % del cuadro)
   --der = margen a la derecha del renglón */
.lema span{
  display:block;
  white-space:nowrap;          /* cada renglón queda en una sola línea, aunque se achique */
  text-align:var(--al, right);
  margin-left:var(--izq, 0);
  margin-right:var(--der, 0);
}

.rubros{
  position:fixed;                      /* ← pegada al pie de la página */
  z-index:40;
  left:0;right:0;bottom:0;             /* ← sin espacio alrededor: toca el borde */
  display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;
  gap:clamp(4px,1.6vw,40px);
  background:var(--papel);
  padding:16px var(--marco);           /* padding interno: alinea el texto con el header */
}
.rubros a{
  font-family:var(--display);font-weight:600;
  /* la letra se achica con el ancho para que las 5 categorías entren siempre en un renglón */
  font-size:clamp(8px,2.3vw,15px);
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  color:var(--grisOscuro);
  transition:color .3s var(--ease);
}
.rubros a:hover{color:var(--gris)}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */
.hoja{padding:calc(var(--marco) * 3.4) var(--marco) calc(var(--marco) * 2)}
.titulo{
  font-family:var(--titular);font-weight:400;
  font-size:clamp(17px,3.2vw,30px);   /* más chico: entra en una sola línea */
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  margin-bottom:clamp(28px,5vw,54px);
}
/* bajada debajo del título de la categoría */
.bajada-cat{
  margin-top:calc(clamp(28px,5vw,54px) * -0.72);
  margin-bottom:clamp(24px,4vw,44px);
  max-width:64ch;
  font-size:clamp(13px,1.5vw,16px);line-height:1.7;color:var(--gris);
}
.volver{
  display:inline-block;margin-bottom:26px;
  font-family:var(--ficha);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);
  transition:color .3s var(--ease);
}
.volver:hover{color:var(--tinta)}

/* ---- LONJAS (el listado de proyectos) ---- */
.lonjas{display:flex;flex-direction:column;gap:clamp(26px,4vw,44px)}
.lonja{display:block;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.lonja.visible{opacity:1;transform:none}
.lonja .vista{
  height:var(--lonja);
  overflow:hidden;
  transition:height .65s var(--ease);
  position:relative;
}
/* .abierta = primer toque en celular (ver app.js); :focus-visible = teclado */
.lonja.abierta .vista,
.lonja:focus-visible .vista{height:var(--lonja-abierta)}
.lonja.abierta .calco{opacity:0}
.lonja .vista .foto img{object-position:var(--pos, center)}
.lonja .vista > *{
  height:100%;
  transition:transform .9s var(--ease);
}
/* La expansión y el zoom al pasar el mouse van SOLO en equipos con mouse real.
   En el celular el :hover queda "pegado" después de tocar y quedaban unas
   fotos agrandadas y otras no. */
@media (hover:hover) and (pointer:fine){
  .lonja:hover .vista{height:var(--lonja-abierta)}
  .lonja .vista > *{transform:scale(1.02)}
  .lonja:hover .vista > *{transform:scale(1)}
}
.lonja .pie{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding-top:12px;
}
.lonja .pie .nombre,.lonja .nombre{white-space:nowrap}
.lonja .nombre{
  font-family:var(--display);font-weight:300;
  font-size:clamp(13px,1.8vw,20px);
  letter-spacing:.09em;text-transform:uppercase;
  transition:letter-spacing .5s var(--ease);
  overflow:hidden;text-overflow:ellipsis;
}
@media (hover:hover) and (pointer:fine){ .lonja:hover .nombre{letter-spacing:.16em} }
.lonja .dato{
  font-family:var(--ficha);font-size:10px;letter-spacing:.12em;
  color:var(--gris);text-transform:uppercase;white-space:nowrap;
}
/* En celular priorizamos ver la foto: ocultamos la ubicación */
@media (max-width:600px){ .lonja .dato{display:none} }

/* ---- PRÓXIMAMENTE: filtro tipo "hoja de calcar" sobre la imagen ----
   traslúcido/opaco; al tocar (o pasar el mouse) se corre y se ve limpia. */
.lonja.proxima{cursor:pointer}
.lonja .calco{
  position:absolute;inset:0;z-index:3;
  background:rgba(255, 255, 255, 0.3);   /* velo traslúcido, sin desenfoque */
  transition:opacity .55s var(--ease);
}
.lonja.proxima.revelado .calco{opacity:0}
@media (hover:hover) and (pointer:fine){ .lonja.proxima:hover .calco{opacity:0} }
/* el nombre "Próximamente: …" puede ir en dos líneas */
.lonja.proxima .nombre{white-space:normal;overflow:visible;text-overflow:clip}

/* ---- DETALLE DE PROYECTO ---- */
.detalle{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,60px)}
.detalle-texto h1{
  font-family:var(--titular);font-weight:400;
  font-size:clamp(17px,2vw,25px);
  letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:22px;
  /* nombres largos de una sola palabra (SUPERMERCADOS) entran sin cortarse */
  overflow-wrap:break-word;
}
.detalle-texto p{
  font-size:15px;line-height:1.72;color:#3a3a3a;
  text-align:justify;              /* márgenes izquierdo y derecho iguales */
  hyphens:auto;                    /* evita huecos grandes en la columna angosta */
  margin-bottom:15px;
}
.ficha{
  margin-top:30px;
  margin-bottom:15px;
}
.ficha div{
  display:flex;justify-content:space-between;gap:14px;
  padding:5px 0;
  font-family:var(--ficha);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;
}
.ficha dt{color:var(--gris)}
.detalle-fotos{display:flex;flex-direction:column;}
/* Todas las fotos al mismo ANCHO (el de la columna) pero con su ALTO real:
   las verticales quedan verticales, sin recorte. */
.detalle-fotos .foto{aspect-ratio:4/3}          /* fallback solo si falta la imagen */
.detalle-fotos .foto:has(img){aspect-ratio:auto}
.detalle-fotos .foto img{position:static;width:100%;height:auto}
/* video del proyecto: mismo ancho que las fotos, arriba de todo */
.detalle-fotos .video-proyecto{width:100%;height:auto;display:block}
/* botón para activar/desactivar el sonido del video */
.caja-video{position:relative}
.caja-video .son{
  position:absolute;right:14px;bottom:14px;z-index:2;
  background:rgba(19,19,19,.45);border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:#fff;cursor:pointer;
  font-family:var(--display);font-weight:300;
  font-size:clamp(9px,1vw,11px);letter-spacing:.16em;
  padding:7px 12px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.caja-video .son:hover{background:rgba(19,19,19,.72)}
.caja-video .son.activo{background:rgba(255,255,255,.9);color:var(--tinta);border-color:transparent}

/* ---- INTERIORISMO: fotos sueltas ----
   Tipo "masonry": todas al mismo ancho de columna pero con su ALTO real,
   así se ve la foto entera (nada recortado). */
.sueltas{
  columns:2;
  column-gap:clamp(10px,1.6vw,18px);
}
.sueltas > *{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(10px,1.6vw,18px);
  aspect-ratio:3/4;                    /* solo si la foto todavía no cargó */
}
.sueltas > *:has(img){aspect-ratio:auto}
.sueltas .foto img{position:static;width:100%;height:auto}
@media (max-width:600px){ .sueltas{columns:1} }
@media (min-width:1100px){ .sueltas{columns:3} }

/* ---- FOTOS de "Quiénes somos" ----
   Igual que interiorismo: cada foto conserva su proporción real (nada recortado). */
.somos-fotos{
  columns:2;
  column-gap:clamp(10px,1.6vw,18px);
  margin-bottom:clamp(30px,5vw,54px);
}
.somos-fotos > *{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(10px,1.6vw,18px);
  aspect-ratio:4/3;                    /* solo si la foto todavía no cargó */
}
.somos-fotos > *:has(img){aspect-ratio:auto}
.somos-fotos .foto img{position:static;width:100%;height:auto}
@media (max-width:600px){ .somos-fotos{columns:1} }
@media (min-width:1100px){ .somos-fotos{columns:3} }

/* ---- TEXTO LARGO (quiénes somos / contacto) ---- */
.columna{max-width:60ch}
/* en "Quiénes somos" el texto ocupa todo el ancho (sin título) */
.columna.somos-texto{max-width:none}
.columna.somos-texto p{text-align:justify}
/* texto de intro (arriba de las fotos): más destacado, sin justificar */
.somos-intro{margin-bottom:clamp(22px,4vw,44px)}
.somos-intro p{font-size:clamp(18px,2.6vw,28px);line-height:1.5;color:var(--tinta);text-align:left}
.columna p{font-size:16px;line-height:1.78;color:#3a3a3a;margin-bottom:18px}
.columna h2{
  font-family:var(--display);font-weight:300;letter-spacing:.14em;
  text-transform:uppercase;font-size:13px;color:var(--gris);
  margin:38px 0 14px;
}
.contactos{list-style:none;font-family:var(--ficha);font-size:13px;letter-spacing:.06em}
.contactos li{padding:11px 0;border-bottom:1px solid var(--linea)}
.contactos a:hover{color:var(--gris)}

/* ---- PIE ---- */
.pie-sitio{
  border-top:1px solid var(--linea);
  margin:clamp(60px,9vw,120px) var(--marco) 0;
  padding:26px 0 34px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--ficha);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
}

/* ============================================================
   PLACEHOLDERS — se reemplazan por fotos reales (ver js/data.js)
   ============================================================ */
.foto{background:var(--hormigon);background-size:cover;background-position:center;position:relative;overflow:hidden}
/* la foto real (si existe) cubre el placeholder; si no carga, se retira y queda el color */
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph1{background:
  linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,0) 55%),
  repeating-linear-gradient(90deg,#cfc8bd 0 3px,#c3bbaf 3px 7px),
  #c8c0b4}
.ph2{background:
  linear-gradient(200deg,#dfe3e6 0%,#c2cad1 48%,#8f9aa2 100%)}
.ph3{background:
  linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 60%),
  repeating-linear-gradient(78deg,#8a6a45 0 6px,#6f5335 6px 13px),
  #6f5335}
.ph4{background:
  radial-gradient(120% 90% at 30% 10%,#f0eeea 0%,#d8d4cd 45%,#b6b1a8 100%)}
.ph5{background:
  linear-gradient(160deg,#2e3630 0%,#4a554a 50%,#242a26 100%)}
.ph6{background:
  linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%),
  repeating-linear-gradient(0deg,#d6d1c9 0 9px,#cac4bb 9px 10px),
  #d0cac2}

/* ============================================================
   MOBILE / TABLET (hasta 860px)
   La composición escalonada se MANTIENE a cualquier tamaño: los
   márgenes en cqw y la letra se achican juntos con el cuadro.
   ============================================================ */
@media (max-width:860px){
  /* nada especial: los rubros ya se achican solos para entrar en un renglón */
}

/* ============================================================
   ESCRITORIO
   ============================================================ */
@media (min-width:860px){
  :root{--lonja:300px;--lonja-abierta:480px}
  /* columna de fotos más ancha (se ven más grandes) */
  .detalle{grid-template-columns:minmax(255px,.85fr) 2.4fr;gap:clamp(36px,5vw,80px)}
  .detalle-texto{position:sticky;top:calc(var(--marco) * 3.2);align-self:start}
  .menu{padding-left:calc(var(--marco) * 1.6)}
}

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