:root {
  --tinta: #000;
  --gris: rgba(0, 0, 0, .38);
  --papel: #fff;
  --f-texto: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --curva: cubic-bezier(.4, .24, .4, 1);
  --u: calc(100cqw / 1024);
  --cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='34' viewBox='0 0 33 34'%3E%3Cpath d='M16.5 0V34M0 17H33' stroke='%23fff' stroke-opacity='.55' stroke-width='3'/%3E%3Cpath d='M16.5 0V34M0 17H33' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") 16 17, crosshair;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--papel); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
#contenido:focus { outline: none; }

.salto {
  position: fixed; left: 8px; top: -60px; z-index: 100; background: #000; color: #fff;
  padding: 8px 12px; font-size: 12px; letter-spacing: .02em;
}
.salto:focus { top: 8px; }


.cab-in, #pagina > * {
  font-size: max(9.5px, calc(7 * var(--u)));
  line-height: max(11px, calc(8 * var(--u)));
  letter-spacing: .04em;
}


.cab {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  background: var(--papel);
  container-type: inline-size;
}
.cab-in { position: relative; height: max(29px, calc(24 * var(--u))); }
.cab-in > a, .cab-in > button {
  position: absolute; top: max(8px, calc(8 * var(--u)));
  white-space: nowrap; display: block;
}
.cab-marca { left: calc(8 * var(--u)); text-transform: uppercase; }
.cab-info { left: calc(326 * var(--u)); }
.cab-indice { left: calc(660 * var(--u)); }
.cab-contacto { right: calc(8 * var(--u)); }
.cab-in [aria-current="page"] { cursor: default; }

.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


#pagina {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  container-type: inline-size;
  overflow-x: clip;
}
#contenido { flex: 1 0 auto; position: relative; display: block; }
.vista { position: relative; }
.vista[hidden] { display: none; }


.rejilla { position: relative; height: calc(1512 * var(--u)); }
.ficha {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.ficha-img {
  display: block; overflow: hidden;
  height: calc(var(--h) * var(--u));
  background: #f1f1f1;
  cursor: var(--cruz);
  transition: opacity .2s;
}
.ficha-img:hover, .ficha-img:focus-visible { opacity: .8; }
.ficha-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ficha-pie { display: flex; justify-content: space-between; gap: 1em; margin-top: calc(8 * var(--u)); }
.ficha-pie a { cursor: var(--cruz); }
.ficha-pie span:last-child { text-align: right; }


.p-cab { position: absolute; left: 0; right: 0; top: calc(40 * var(--u)); height: 0; }
.p-cab > * { position: absolute; top: 0; }
.p-num { left: calc(8 * var(--u)); }
.p-tit { left: calc(40 * var(--u)); white-space: nowrap; }
.p-desc { left: calc(236 * var(--u)); width: max(calc(250 * var(--u)), 270px); }
.p-disc { right: calc(129 * var(--u)); text-align: right; white-space: nowrap; }
.p-anio { right: calc(8 * var(--u)); }
.p-lamina { position: relative; height: calc(var(--alto) * var(--u)); }
.im {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  overflow: hidden; background: #f1f1f1;
}
.im img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }


.info { position: relative; height: calc(214 * var(--u)); }
.info > * { position: absolute; }
.i-etq { color: var(--gris); top: calc(40 * var(--u)); }
.i-acerca { left: calc(8 * var(--u)); }
.i-rubros { left: calc(661 * var(--u)); }
.i-servicios { left: calc(831 * var(--u)); }
.i-texto { left: calc(8 * var(--u)); top: calc(56 * var(--u)); width: calc(543 * var(--u)); }
.i-lista { top: calc(56 * var(--u)); }


.pie { position: relative; flex: none; height: calc(16 * var(--u)); min-height: max(22px, calc(16 * var(--u))); }
.pie > * { position: absolute; top: 0; white-space: nowrap; }
.pie-a { left: calc(8 * var(--u)); }
.pie-b { left: calc(326 * var(--u)); }
.pie-c { left: calc(660 * var(--u)); }
.pie-d { right: calc(8 * var(--u)); }
.pie a:hover, .pie button:hover, .cab a:hover, .cab button:hover { opacity: .6; }
.pie a, .pie button, .cab a, .cab button { transition: opacity .2s; }
.pie-c a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }


@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.js .vista:not([hidden]) .t-e { animation: aparece .3s ease .3s backwards; }
.js .vista:not([hidden]) .i-e { animation: aparece .45s ease calc(.55s + min(var(--i, 0), 5) * .1s) backwards; }
.js .cab.entra .cab-in > * { animation: aparece .3s ease .3s backwards; }
.js .pie.entra > * { animation: aparece .3s ease .3s backwards; }
.js img.dif { opacity: 0; transition: opacity .45s ease; }
.js img.dif.ok { opacity: 1; }


@media (max-width: 959px) {
  .cab-in, #pagina > * { font-size: 10px; line-height: 11px; }
  .cab-in { height: 29px; }
  .cab-in > a, .cab-in > button { top: 10px; }
  .cab-marca { left: 10px; }
  .cab-info { left: 56%; }
  .cab-indice { left: auto; right: 10px; }
  .cab-contacto { display: none !important; }

  #contenido { padding-top: 29px; }
  .rejilla { height: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; }
  .ficha { position: static; width: auto; }
  .ficha-img { height: auto; aspect-ratio: var(--am); }
  .ficha-pie { margin-top: 10px; }

  .p-cab { position: static; height: auto; padding: 20px 10px 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 9px; }
  .p-cab > * { position: static; }
  .p-num { order: 1; }
  .p-tit { order: 2; flex: 1 1 auto; white-space: normal; }
  .p-disc { order: 3; white-space: normal; }
  .p-anio { order: 4; }
  .p-desc { order: 5; flex: 0 0 100%; width: auto; }
  .p-lamina { height: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 10px 0; }
  .im { position: static; width: auto; height: auto; aspect-ratio: var(--am); }

  .info { height: auto; padding: 20px 10px 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 0; }
  .info > * { position: static; }
  .i-acerca { grid-column: 1 / -1; }
  .i-texto { grid-column: 1 / -1; width: auto; margin: 9px 0 34px; }
  .i-rubros, .i-servicios { grid-row: 3; }
  .i-etq.i-servicios { grid-column: 2; }
  .i-etq.i-rubros { grid-column: 1; }
  .i-lista.i-rubros { grid-column: 1; grid-row: 4; }
  .i-lista.i-servicios { grid-column: 2; grid-row: 4; }
  .i-lista { margin-top: 9px; }

  .pie { height: auto; min-height: 20px; margin-top: 58px; display: flex; justify-content: space-between; gap: 12px; padding: 0 10px 9px; }
  .pie > * { position: static; }
  .pie-b { display: none; }
}


@media (prefers-reduced-motion: reduce) {
  .js .vista .t-e, .js .vista .i-e, .js .cab .cab-in > *, .js .pie > * { animation: none !important; }
  .js img.dif { opacity: 1 !important; transition: none !important; }
  .ficha-img, .pie a, .pie button, .cab a, .cab button { transition: none; }
}