/* ==========================================================================
   OFFICE JEI · las clases de los bloques que el cliente puede editar
   --------------------------------------------------------------------------
   El diseño trae los estilos escritos elemento por elemento, en el atributo
   `style`. Eso funciona mientras el marcado esté escrito a mano, pero un
   bloque repetible tiene un solo molde: los cuatro pasos, las seis fichas del
   catálogo, las dos fotos de la obra y las fichas de contacto necesitan que
   sus estilos vivan en un sitio y no en cada copia.

   Los valores son exactamente los del diseño. Lo único que se añade es lo que
   hace falta para que nada se rompa cuando la lista deje de tener el número
   de elementos con el que se dibujó.
   ========================================================================== */

/* El atributo `hidden` tiene que ganarle a los display en línea del diseño. */
[hidden] { display: none !important; }

/* --- 01 · Los tres puntos del taller ------------------------------------- */
.oj-punto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #1A1A19;
  padding-top: 12px;
}
.oj-punto__t {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 17px;
}
.oj-punto__d { font-size: 13px; line-height: 1.55; color: #4A463F; }

/* --- 02 · Los pasos del proceso ------------------------------------------
   El último va en negativo. En el diseño eso eran otros estilos escritos a
   mano en esa tarjeta; aquí es un interruptor del panel, así que el cliente
   puede mover cuál es la que remata. */
.oj-paso {
  background: #F3EFE8;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 250px;
  transition: background .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.oj-paso:hover { background: #fff; }
.oj-paso--negativo { background: #1A1A19; color: #F3EFE8; }
.oj-paso--negativo:hover { background: #1A1A19; }
.oj-paso__n {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: #B4873A;
  letter-spacing: -.04em;
}
.oj-paso--negativo .oj-paso__n { color: #C8A06A; }
.oj-paso__t {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
}
.oj-paso__p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #4A463F; }
.oj-paso--negativo .oj-paso__p { color: #CFC9BE; }

/* --- 03 · Las fichas del catálogo ----------------------------------------
   El acercamiento de la foto lo hacía el guion del diseño con pointerenter.
   Aquí es CSS: se ve igual, funciona sin JavaScript y no hay que volver a
   enganchar nada cuando el cliente agrega una ficha desde el panel. */
.oj-ficha {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.2;
  background: #232320;
  color: #F3EFE8;
}
.oj-ficha__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92);
  transition: transform 1.3s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}
.oj-ficha:hover .oj-ficha__img { transform: scale(1.07); filter: saturate(1.02); }
.oj-ficha__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 25, 0) 40%, rgba(26, 26, 25, .9) 100%);
}
.oj-ficha__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oj-ficha__t {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.015em;
}
.oj-ficha__d {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C8A06A;
}

/* --- 03 · Las tarjetas de servicio ---------------------------------------- */
.oj-tarjeta {
  border: 1px solid rgba(243, 239, 232, .22);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .4s ease, background .4s ease;
}
.oj-tarjeta:hover { border-color: #C8A06A; background: #232320; }
.oj-tarjeta__t {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
}
.oj-tarjeta__p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #CFC9BE; }

/* --- 04 · El par de fotos de la obra -------------------------------------
   Eran dos columnas fijas. Desde el panel pueden ser una, tres o cuatro, así
   que la rejilla se acomoda sola; con dos se ve exactamente igual que antes. */
.oj-obra__reja {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 12px;
}
.oj-obra { overflow: hidden; aspect-ratio: 1.33; }
.oj-obra__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.3s cubic-bezier(.16, 1, .3, 1);
}
.oj-obra:hover .oj-obra__img { transform: scale(1.06); }

/* --- 06 · Las fichas de contacto ------------------------------------------ */
.oj-ficha-c {
  background: #F3EFE8;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .4s ease;
}
.oj-ficha-c:hover { background: #fff; }
.oj-ficha-c__r {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6E6A62;
}
.oj-ficha-c__n {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.015em;
}
.oj-ficha-c__vias {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  line-height: 1.5;
}
.oj-ficha-c__vias--gris { color: #4A463F; }
/* El primer enlace de la ficha es el canal principal de esa persona y va
   destacado; el segundo, si lo hay, en gris. Lo decide la posición y no un
   campo del panel: así una ficha sin WhatsApp destaca su teléfono sola. */
.oj-ficha-c__via { color: #4A463F; }
.oj-ficha-c__via:first-child { color: #8A6524; font-weight: 500; }
.oj-ficha-c__via:hover { color: #1A1A19; }
.oj-ficha-c__s { color: #4A463F; }
/* El correo es un enlace desde el 9-sep-2026, y tiene que parecerlo: el
   cliente revisó la página y dijo que no veía por dónde le podían escribir.
   Subrayado fino y separado, que en monoespaciada no ensucia la lectura. */
.oj-ficha-c__correo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: #1A1A19;
  text-decoration: underline;
  text-decoration-color: #B4873A;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.oj-ficha-c__correo:hover { color: #8A6524; text-decoration-color: #8A6524; }

/* --- La red de seguridad de la aparición al bajar -------------------------
   El guion esconde lo que lleva `data-reveal` y lo va enseñando conforme se
   baja. Si el JavaScript no llega a cargar, la página se quedaría casi en
   blanco: por eso quien esconde es el propio guion —marcando el <html>— y no
   una regla que esté puesta desde el principio. */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Una palabra larguísima escrita desde el panel no puede sacar la caja. */
.oj-ficha__t, .oj-ficha__d, .oj-tarjeta__t, .oj-paso__t, .oj-punto__t,
.oj-ficha-c__n { overflow-wrap: anywhere; }

/* --- La barra de arriba en un teléfono -----------------------------------
   Con los tres enlaces puestos, el botón «Cotizar» se salía 41 px por la
   derecha a 375 px y quedaba cortado. Y no se veía: el envoltorio del diseño
   lleva `overflow-x:hidden`, así que `scrollWidth` decía que todo cabía.
   La página se recorre bajando, así que en pantalla chica se van los enlaces
   de sección y se queda lo que convierte. */
@media (max-width: 520px) {
  .oj-nav__e { display: none; }
  [data-cotizar] { min-height: 44px; }
}

/* ==========================================================================
   La sillería
   --------------------------------------------------------------------------
   OFFICE JEI no la fabrica: la surte. Son 163 modelos del catálogo del
   proveedor, y no caben en la portada, así que viven en /silleria/ y en la
   portada queda una franja con unos cuantos que lleva allá.

   Van sobre BLANCO y no sobre el fondo oscuro de la página. Dos razones: las
   fotos vienen recortadas de un catálogo impreso, que es blanco, y sobre él
   se leen las patas cromadas, los perfiles negros y las mallas grises que
   sobre oscuro se comen unas a otras. Y porque un catálogo de producto se
   espera blanco: el visitante ya no está leyendo la página, está comparando
   sillas. Las secciones oscuras del diseño enmarcan la rejilla; la rejilla es
   la ficha técnica.
   ========================================================================== */

/* --- La franja de la portada ---------------------------------------------
   Aquí sí manda el fondo oscuro de la portada, así que cada silla va en su
   propio recuadro blanco: se lee como una tira de catálogo pegada al diseño. */
.oj-muestra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 560px) {
  /* Cuatro y no las que quepan: con las ocho de fábrica, `auto-fit` metía
     siete arriba y dejaba una sola abajo. */
  .oj-muestra { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* El cuadro es cuadrado y la foto se mete dentro con `object-fit:contain`.
   El camino corto —flex centrado y `max-height:100%` en la imagen— NO
   funciona: el alto del cuadro lo pone `aspect-ratio`, o sea que es
   automático, y un porcentaje contra un alto automático no se resuelve. */
.oj-muestra__pieza {
  position: relative;
  background: #fff;
  aspect-ratio: 1;
  display: block;
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.oj-muestra__pieza:hover {
  box-shadow: 0 0 0 2px #B4873A;
  transform: translateY(-3px);
}
.oj-muestra__pieza img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  object-fit: contain;
  display: block;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.oj-muestra__pieza:hover img { transform: scale(1.06); }

/* --- La página del catálogo ----------------------------------------------- */
.oj-catalogo { background: #EDE9E1; color: #1A1A19; }

.oj-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.oj-filtro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 1px solid rgba(26, 26, 25, .22);
  background: #fff;
  color: #4A463F;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.oj-filtro:hover { border-color: #1A1A19; color: #1A1A19; }
.oj-filtro[aria-pressed="true"] {
  background: #1A1A19;
  border-color: #1A1A19;
  color: #F3EFE8;
  font-weight: 500;
}
.oj-filtro:focus-visible { outline: 2px solid #B4873A; outline-offset: 2px; }

.oj-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 620px) {
  /* En un teléfono, una sola columna con 163 fichas son sesenta y cinco mil
     píxeles de scroll. Dos son la mitad y la silla todavía se distingue. */
  .oj-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 14px;
  }
}
.oj-silla {
  background: #fff;
  border: 1px solid #DCD6CB;
  display: flex;
  flex-direction: column;
  transition: border-color .35s ease, box-shadow .35s ease,
              transform .35s cubic-bezier(.16, 1, .3, 1);
}
.oj-silla:hover {
  border-color: #B4873A;
  box-shadow: 0 10px 30px rgba(26, 26, 25, .10);
  transform: translateY(-3px);
}
/* Mismo cuento: con flex y `max-height:100%` cada foto estiraba su cuadro a
   lo suyo —de 283 a 350 px de alto en la misma fila— y el nombre de cada
   silla quedaba a una altura distinta. Ahora las cinco de una fila empiezan
   igual, que es lo que hace que una rejilla parezca un catálogo. */
.oj-silla__foto {
  position: relative;
  aspect-ratio: 1;
}
.oj-silla__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 18px 18px 6px;
  object-fit: contain;
  display: block;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.oj-silla:hover .oj-silla__foto img { transform: scale(1.05); }

/* Lo que se agrega desde el panel nace sin foto, y un <img src=""> pinta el
   icono de imagen rota con el nombre encima. El hueco dice que falta. La
   imagen se queda transparente y NO oculta: en modo edición tiene que seguir
   recibiendo el clic que abre el selector de archivo. */
.oj-silla__foto img[src=""],
.oj-trabajo img[src=""] { opacity: 0; }
.oj-silla__foto:has(img[src=""])::after,
.oj-trabajo:has(img[src=""])::after {
  content: "Foto pendiente";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A6524;
  pointer-events: none;
}
.oj-trabajo:has(img[src=""])::after { color: #C8A06A; }
.oj-silla__cuerpo {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  border-top: 1px solid #EDE9E1;
  margin-top: 10px;
  padding-top: 14px;
}
.oj-silla__t {
  font-family: 'Familjen Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #1A1A19;
  overflow-wrap: anywhere;
}
.oj-silla__f {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A6524;
}
.oj-silla__r {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: #4A463F;
}
.oj-silla__r li { position: relative; padding-left: 12px; }
.oj-silla__r li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 1px;
  background: #B4873A;
}

/* Cuántos modelos se están viendo: lo cuenta el guion sobre las fichas
   dibujadas, así que no envejece cuando el cliente apaga una desde el panel. */
.oj-cuenta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6E6A62;
}

/* A dos columnas en un teléfono la ficha mide unos 170 px: el relleno del
   diseño se la come, así que se aprieta un poco y la letra baja un punto. */
@media (max-width: 619px) {
  .oj-silla__foto img { padding: 12px 12px 4px; }
  .oj-silla__cuerpo { padding: 12px 12px 14px; gap: 6px; margin-top: 6px; }
  .oj-silla__t { font-size: 13.5px; }
  .oj-silla__r { font-size: 11px; }
}

/* --- Los botones que el diseño no traía ---------------------------------
   El diseño resuelve cada botón con estilos en línea, uno por uno. La franja
   de sillería y la página del catálogo necesitan los mismos, así que aquí van
   como clases, con los valores del diseño: la tipografía monoespaciada en
   versales, el mismo relleno y la misma subida al pasar el ratón. */
.oj-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(243, 239, 232, .3);
  color: #F3EFE8;
  background: transparent;
  transition: border-color .3s ease, background .3s ease, color .3s ease,
              transform .35s cubic-bezier(.16, 1, .3, 1);
}
.oj-boton:hover {
  border-color: #B4873A;
  background: #B4873A;
  color: #1A1A19;
  transform: translateY(-3px);
}
.oj-boton--oro {
  background: #B4873A;
  border-color: #B4873A;
  color: #1A1A19;
  padding: 20px 30px;
  font-size: 12px;
  font-weight: 500;
}
.oj-boton--oro:hover { background: #F3EFE8; border-color: #F3EFE8; color: #1A1A19; }


/* ==========================================================================
   La galería de trabajos
   --------------------------------------------------------------------------
   Las fotos que manda el cliente por WhatsApp, que son la prueba de lo que
   dice la sección de arriba. Van sobre el fondo oscuro de la portada —al
   revés que la sillería, que es catálogo de producto y pide blanco—: aquí
   son fotos de ambiente, con su propio fondo, y el oscuro las deja hablar.

   De la rejilla se dibujan doce; el resto llega al pulsar el botón. No es
   estética: una imagen dentro de un elemento con `hidden` NO se descarga,
   así que la sección abre pesando lo que pesan doce y no veinticinco.
   ========================================================================== */
.oj-galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 620px) {
  .oj-galeria {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 14px;
  }
}

.oj-trabajo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #232320;
  color: #F3EFE8;
}
.oj-trabajo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}
.oj-trabajo:hover img,
.oj-trabajo:focus-visible img { transform: scale(1.06); filter: saturate(1.03); }
.oj-trabajo:focus-visible { outline: 2px solid #C8A06A; outline-offset: 3px; }

/* El pie se apoya sobre un degradado y no sobre una banda: así la foto se
   sigue viendo entera y el texto se lee igual sobre claro que sobre oscuro. */
.oj-trabajo__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(26, 26, 25, 0) 0%, rgba(26, 26, 25, .88) 60%);
}
.oj-trabajo__cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C8A06A;
}
@media (max-width: 619px) {
  .oj-trabajo__pie { padding: 24px 10px 10px; font-size: 11.5px; }
}

/* Los filtros de la galería viven sobre oscuro; los de la página de sillería,
   sobre claro. Mismo control, dos fondos. */
.oj-filtros--oscuro .oj-filtro {
  border-color: rgba(243, 239, 232, .25);
  background: transparent;
  color: #CFC9BE;
}
.oj-filtros--oscuro .oj-filtro:hover { border-color: #C8A06A; color: #F3EFE8; }
.oj-filtros--oscuro .oj-filtro[aria-pressed="true"] {
  background: #B4873A;
  border-color: #B4873A;
  color: #1A1A19;
}

/* --- El visor -------------------------------------------------------------
   Copiado del de RC, que ya está probado. Aparece con una animación de CSS y
   no encendiendo una clase desde el guion: el interruptor tendría que ir
   dentro de un requestAnimationFrame, que NO se dispara si la pestaña está en
   segundo plano, y la ventana se quedaba invisible. Así la anima el navegador
   solo en cuanto se inserta. */
.oj-visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 16, 15, .95);
  padding: 34px;
  animation: ojAparece .25s ease;
}
@keyframes ojAparece { from { opacity: 0 } to { opacity: 1 } }
.oj-visor img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.oj-visor__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  padding: 0 16px;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #CFC9BE;
}
.oj-visor button {
  position: absolute;
  background: none;
  border: 0;
  color: #F3EFE8;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 26px;
  line-height: 1;
  padding: 14px 18px;
  transition: color .2s ease;
}
.oj-visor button:hover { color: #C8A06A; }
.oj-visor .oj-visor__cerrar { top: 10px; right: 12px; font-size: 30px; }
.oj-visor .oj-visor__antes { left: 4px; top: 50%; transform: translateY(-50%); }
.oj-visor .oj-visor__despues { right: 4px; top: 50%; transform: translateY(-50%); }
@media (max-width: 619px) { .oj-visor { padding: 12px; } }