:root {
  --vw: 100vw;
  --ivh: 100vh;
  --negro: #000;
  --blanco: #fff;
  --gutter: 10px;
  --margen: 20px;
  --col: calc((var(--vw) - 6 * var(--gutter) - 2 * var(--margen)) / 7);
  --pad: 20px;
  --cab: 48px;
  --cab-in: 28px;
  --curva: cubic-bezier(.08, .26, .04, 1);
  --fuente: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (max-width: 1048px) {
  :root { --cab: 44px; --cab-in: 28px; --margen: 16px; --col: calc((var(--vw) - 5 * var(--gutter) - 2 * var(--margen)) / 6); }
}
@media (max-width: 740px) {
  :root { --pad: 10px; --cab: 42px; --cab-in: 26px; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-rendering: geometricprecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { height: 100%; min-height: 100%; overflow: hidden; background: var(--blanco); color: var(--negro); font-family: var(--fuente); }
body { margin: 0; width: 100%; height: 100%; max-width: 100%; background: var(--blanco); color: var(--negro); display: flex; flex-direction: column; overscroll-behavior: none; }
h1, h2, h3, p { margin: 0; font: inherit; }
button, a { color: inherit; cursor: pointer; text-decoration: none; font: inherit; letter-spacing: inherit; }
button { appearance: none; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; text-transform: inherit; display: block; border-radius: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--negro); color: var(--blanco); }
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--negro); outline-offset: 3px; }
.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; }


.etiqueta, .acerca h2, .acerca-boletin, .acerca-creditos { font-weight: 700; font-size: 11px; line-height: 110%; text-transform: uppercase; }
.direccion h3 { font-weight: 500; font-size: 12px; line-height: 126%; text-transform: uppercase; }
.cuerpo, .acerca { font-weight: 500; font-size: 12px; line-height: 126%; }
@media (max-width: 1048px) {
  .etiqueta, .acerca h2, .acerca-boletin, .acerca-creditos { font-size: 10px; }
}


.intro { position: fixed; inset: 0; z-index: 5000; width: var(--vw); height: var(--ivh); background: var(--blanco); display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
.intro-logo { width: calc(var(--col) * .6); height: auto; display: block; color: var(--negro); opacity: 0; transform: scale(.9); }
@media screen and (max-width: 900px) { .intro-logo { width: calc(var(--col) * 1 + var(--gutter) * 1); } }
.intro.sale { transition: opacity .7s ease-out; opacity: 0; pointer-events: none; }


.cabecera { position: fixed; top: 0; left: 0; z-index: 2000; width: var(--vw); height: var(--cab); padding: var(--pad) var(--pad) 0 var(--pad); pointer-events: auto; font-weight: 700; font-size: 11px; line-height: 110%; text-transform: uppercase; opacity: 0; transform: translateY(-10px); will-change: transform, opacity; }
.cabecera.acerca-abierto { cursor: pointer; }
.cabecera-vineta { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: var(--ivh); pointer-events: none; background: linear-gradient(#fff 0%, #fff0 20%); transition: opacity .25s cubic-bezier(.49, 0, .53, 1); }
.cabecera-vineta.oculta { opacity: 0; transition-delay: .3s; }
.cabecera-vineta::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(#fff 0%, #fff0 30%); transition: opacity .6s; }
.cabecera.es-inicio:hover .cabecera-vineta::after { opacity: 1; }
.cabecera-in { position: relative; display: flex; gap: var(--gutter); width: 100%; height: 100%; }
.t1 { min-width: var(--col); }
.t2 { width: calc(var(--col) * 2 + var(--gutter)); display: flex; justify-content: flex-start; padding-top: 11px; }
.t3 { width: calc(var(--col) * 3 + var(--gutter) * 2); display: flex; justify-content: flex-start; }
.t4 { min-width: var(--col); }
.t4 button, .t4 a { align-self: flex-start; }
.logo-enlace { display: block; width: min-content; min-width: var(--col); }
.logo-marca { display: block; width: auto; height: 28px; color: var(--negro); overflow: visible; }
.t3-tag { margin-left: calc(var(--col) * .5); padding-top: 11px; transform: translate(-50%); white-space: nowrap; }
.t4-fila { display: flex; justify-content: flex-end; align-items: center; gap: 20px; width: 100%; padding-top: 11px; white-space: nowrap; }
.t2 .solo-tablet { display: none; }
.t4-fila > * { transition: opacity .2s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .t4-fila > *:hover { opacity: .35; }
}
.t4-fila .copiado { opacity: 1 !important; cursor: auto; }
.boton-volver { display: none; padding-top: 11px; }
.cabecera.acerca-abierto .t4-fila { display: none; }
.cabecera.acerca-abierto .boton-volver { display: block; }
.cabecera.acerca-abierto .t1 .logo-enlace { visibility: hidden; }
@media (max-width: 1048px) {
  .cabecera { padding: 16px 16px 0; }
  .t2, .t3, .t4 { padding-top: 8px; }
  .t2 { width: auto; flex: 1 1 auto; }
  .t2 .solo-tablet { display: block; }
  .t3 { display: none; }
  .t4-fila, .boton-volver { padding-top: 0; font-size: 12px; font-size: 10px; }
  .t4 { min-width: var(--col); }
  .t4-fila .opcional { display: none; }
  .t4-fila .acerca-btn { font-size: 12px; }
}
@media (max-width: 900px) { .t4-fila .opcional { display: none; } }


.aviso { position: fixed; z-index: 2100; right: var(--pad); bottom: var(--pad); margin: 0; font-weight: 700; font-size: 11px; line-height: 110%; letter-spacing: 0; white-space: nowrap; color: #fff; mix-blend-mode: difference; transition: opacity .2s ease-out; }
.aviso a { text-decoration: none; opacity: .6; transition: opacity .2s ease-out; }
.aviso a:hover, .aviso a:focus-visible { opacity: 1; }
@media (max-width: 1048px) { .aviso { font-size: 10px; right: 16px; bottom: 16px; } }
.en-trabajos .aviso { right: auto; left: 50%; transform: translateX(-50%); }
.aviso.oculto { opacity: 0; pointer-events: none; }


.fondo { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: var(--ivh); background: var(--blanco); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.fondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--blanco); }
.fondo-vineta { position: fixed; z-index: 2; top: 0; left: 0; width: var(--vw); height: var(--ivh); pointer-events: none; }
.fondo-vineta::before, .fondo-vineta::after { content: ""; position: absolute; inset: 0; }
.fondo-vineta::before { background: linear-gradient(90deg, #fff 0%, #fff0 20%), linear-gradient(270deg, #fff 0%, #fff0 20%); }
.fondo-vineta::after { background: linear-gradient(#fff0 80%, #fff 100%); }
.fondo-capa { position: fixed; inset: 0; z-index: 10; background: transparent; cursor: pointer; touch-action: none; display: none; }
.fondo-capa.activa { display: block; }
.fondo:focus-visible { outline-offset: -3px; }
.fondo-respaldo { position: absolute; inset: 0; background: #fff url(../media/respaldo.webp) center / cover no-repeat; display: none; }
.sin-webgl .fondo-respaldo { display: block; }
.sin-webgl .fondo canvas { display: none; }
@media (max-width: 740px) { .fondo-respaldo { background-image: url(../media/respaldo-m.webp); } }


.acerca-cont { position: fixed; top: 0; left: 0; z-index: 1999; width: var(--vw); min-height: 50vh; overflow-y: auto; pointer-events: auto; transform: translateY(-100%); visibility: hidden; background: var(--blanco); scrollbar-width: none; overscroll-behavior: contain; }
.acerca-cont::-webkit-scrollbar { display: none; }
.acerca-cont.abierto { visibility: visible; }
.acerca { position: relative; display: flex; width: 100%; height: auto; min-height: 100%; padding: var(--pad); overflow: hidden; background: var(--blanco); text-transform: none; }
.acerca h2 { margin-bottom: 20px; }
.acerca p { margin: 0; }
.acerca-logo { width: calc(var(--col) * 1 + var(--gutter) * 1); margin-bottom: var(--pad); }
.acerca-logo .logo-enlace { min-width: 0; }
.acerca-contenido { display: flex; gap: calc(var(--col) * 1 + var(--gutter) * 2); height: fit-content; padding-top: 11px; }
.acerca-texto { width: calc(var(--col) * 2 + var(--gutter) * 1); }
.acerca-redes { display: flex; flex-direction: column; justify-content: space-between; width: calc(var(--col) * 3 + var(--gutter) * 2); }
.acerca-arriba, .acerca-abajo { display: flex; gap: 10px; }
.acerca-contacto { display: flex; flex-direction: column; width: calc(var(--col) * 1 + var(--gutter) * 1); }
.acerca-direcciones { display: flex; flex-direction: column; }
.acerca-direcciones-lista { display: flex; gap: 10px; }
.direccion { position: relative; width: var(--col); height: fit-content; opacity: .35; cursor: pointer; transition: opacity .2s ease-out; }
.direccion.activa { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .direccion:hover { opacity: 1; } }
.direccion-imagen { position: absolute; z-index: 20; top: calc(100% + 13px); left: 0; width: 100%; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; }
.direccion-imagen img { display: block; width: 100%; height: auto; max-height: inherit; object-fit: cover; aspect-ratio: 4 / 5; }
.direccion:hover .direccion-imagen, .direccion.activa .direccion-imagen { opacity: 1; }
.acerca-boletin, .acerca-copy, .acerca-creditos { display: flex; width: calc(var(--col) * 1 + var(--gutter) * 1); }
.acerca-boletin { align-items: center; }
.acerca-creditos { align-items: flex-end; }
.enlace-suave { opacity: .35; transition: opacity .2s ease-out; }
@media (hover: hover) and (pointer: fine) { .enlace-suave:hover { opacity: 1; } }
.enlace-suave:focus-visible { opacity: 1; }
.acerca-contacto .enlace-suave { display: block; }
.boletin-boton { opacity: .35; transition: opacity .2s ease-out; }
@media (hover: hover) and (pointer: fine) { .boletin-boton:hover { opacity: 1; } }
.boletin-boton.listo { opacity: 1; cursor: auto; }
@media (max-width: 1048px) {
  .acerca { padding: 16px; }
  .acerca h2 { margin-bottom: 10px; }
  .acerca-logo { width: calc(var(--col) * 2 + var(--gutter) * 2); }
  .acerca-contenido { padding-top: 9px; }
  .acerca-texto { width: 100%; }
  .acerca-redes { justify-content: flex-start; gap: 40px; width: 100%; }
  .acerca-contacto, .direccion, .acerca-boletin, .acerca-copy, .acerca-creditos { width: 100%; }
  .acerca-contacto { width: 33.3333%; }
  .acerca-direcciones { width: 66.6667%; }
}
@media (max-width: 740px) {
  .acerca { padding-top: 20px; }
  .acerca-logo { display: none; }
  .acerca-contenido { display: block; padding: 0 0 20px; }
  .acerca-redes { display: flex; flex-direction: column; gap: 30px; width: 100%; margin-top: 30px; }
  .acerca-arriba, .acerca-abajo { display: contents; }
  .acerca-boletin { order: 1; width: auto; }
  .acerca-contacto { order: 2; width: 100%; }
  .acerca-direcciones { order: 3; width: 100%; }
  .acerca-copy { order: 4; width: 100%; }
  .acerca-creditos { display: none; }
  .acerca-direcciones-lista { flex-direction: column; gap: 8px; }
  .direccion { width: 100%; }
  .direccion-imagen { top: auto; bottom: 80%; left: 100%; }
  .cabecera.acerca-abierto .t1 .logo-enlace { visibility: visible; }
}


@media (prefers-reduced-motion: reduce) {
  .cabecera { opacity: 1; transform: none; }
  .intro { display: none; }
  .t4-fila > *, .enlace-suave, .direccion, .boletin-boton { transition: none; }
}


.toggles { display: none; align-items: center; gap: 20px; margin-top: -2px; pointer-events: auto; white-space: nowrap; }
.cabecera.en-trabajos .toggles { display: flex; }
.cabecera.en-trabajos .t2 .solo-tablet { display: none; }
.cabecera.en-trabajos .cabecera-vineta { opacity: 0; }
.toggle { cursor: pointer; opacity: .35; transition: opacity .2s ease-out; }
.toggle span { position: relative; margin-right: 5px; }
.toggle.activo { opacity: 1; }
.toggle.activo span::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 3px; background: var(--negro); transform: translate(-50%, -50%); }
@media (hover: hover) and (pointer: fine) { .toggle:hover { opacity: 1; } }
@media (max-width: 1048px) { .toggles { gap: 16px; } .t2 .toggles { font-size: 10px; } }

.fondo { transition: opacity .4s cubic-bezier(.49, 0, .53, 1); }
.fondo.apagado { opacity: 0; pointer-events: none; }
.trab { position: fixed; inset: 0; z-index: 1; background: var(--blanco); opacity: 0; pointer-events: none; transition: opacity .4s cubic-bezier(.49, 0, .53, 1); }
.trab[hidden] { display: none; }
.trab.abierta { opacity: 1; pointer-events: auto; transition: opacity .5s cubic-bezier(.49, 0, .53, 1) .35s; }
.trab-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; transition: transform .35s var(--curva) .3s; }
.trab-scroll::-webkit-scrollbar { display: none; }
body.con-acerca .trab-scroll { transform: translateY(var(--acerca-alto, 0px)); transition-delay: 0s; }
.cuenta { white-space: nowrap; }
.trab .etiqueta { margin: 0; }

.trab-flujo { position: relative; display: flex; flex-direction: column; padding-top: 200px; padding-bottom: 120px; }
.trab-flujo[hidden] { display: none; }
.trab-flujo:has(> .tira:first-child) { padding-top: 80px; }
.bloque { margin-bottom: 100px; }
.bloque:has(+ .tira), .bloque.tira { margin-bottom: 40px; }
.bloque:last-child { margin-bottom: 0; }


.tira { position: relative; width: var(--vw); height: var(--ivh); display: flex; align-items: center; padding: 100px 0; overflow: hidden; }
.tira-principal { position: absolute; top: 50%; left: 0; width: 100%; display: flex; flex-direction: column; gap: 16px; transform: translateY(-50%); }
.tira-pista { position: relative; width: 100%; }
.tira-lamina { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; pointer-events: none; }
.tira-lamina img { display: block; width: auto; height: 100%; object-fit: contain; }
.tira-zona { position: absolute; top: 0; left: 0; z-index: 10; padding: 0; border: 0; background: transparent; }
.tira-zona.prev { cursor: w-resize; }
.tira-zona.next { cursor: e-resize; }
.tira-pie { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 20px; }

.ancha { width: var(--vw); }
.ancha img { display: block; width: 100%; height: auto; background: #f2f2f2; }
.ancha-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 20px 0; }


.cons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px 40px; padding: 0 20px; }
.espacio { grid-column: span 1; }
.ficha { grid-column: span 1; display: flex; flex-direction: column; gap: 20px; margin: 0; cursor: default; }
.ficha-img { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f2f2f2; transition: opacity .4s; }
.ficha-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ficha-pie { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; transition: opacity .4s; }
.cons.hay .ficha:not(.sobre) .ficha-pie { opacity: 0; }
.cons.hay .ficha:not(.sobre) .ficha-img { opacity: .06; }
@media (max-width: 1048px) {
  .trab-flujo { padding-top: 100px; }
  .bloque { margin-bottom: 60px; }
  .cons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
  .ficha-pie { gap: 5px; }
  .ficha-pie, .ficha-img { transition: none; }
}
@media (max-width: 900px) {
  .cons { gap: 20px 10px; padding: 0 16px; }
  .ficha { gap: 16px; }
  .tira { height: auto; padding: 0; }
  .tira-principal { position: relative; top: auto; transform: none; }
  .ancha img { height: calc(var(--ivh) - 27px); object-fit: cover; }
  .ancha-pie, .tira-pie { padding: 16px 16px 0; }
}


.trab-lista { position: relative; display: flex; width: 100%; padding: 200px 20px 160px; }
.trab-lista[hidden] { display: none; }
.lista-filas { display: flex; flex-direction: column; width: calc(var(--col) * 4 + var(--gutter) * 3); margin-left: calc(var(--col) + var(--gutter)); }
.fila { flex: none; display: flex; gap: 10px; height: calc((var(--col) * 4 + var(--gutter) * 3 - 50px) / 6 * 1.25 - 5px); margin-bottom: 10px; overflow: hidden; cursor: default; }
.fila img { flex: none; display: block; width: auto; height: 100%; max-width: none; object-fit: cover; transition: transform .4s, opacity .4s; }
.trab-cuenta, .trab-nombre { position: fixed; top: 0; z-index: 100; color: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity .2s; font-weight: 700; font-size: 11px; line-height: 110%; text-transform: uppercase; }
.trab-cuenta.ver, .trab-nombre.ver { opacity: 1; }
.trab-cuenta { left: 16px; }
.trab-nombre { left: calc(100vw - 16px - var(--col)); width: var(--col); }
@media screen and (hover: hover) and (pointer: fine) {
  .lista-filas:hover .fila { opacity: .06; transition: opacity .4s; }
  .lista-filas:hover .fila:hover { opacity: 1; }
  .lista-filas:hover .fila:not(:hover) img { transform: scale(.97); }
}
@media (max-width: 1048px) {
  .trab-lista { padding: 200px 16px 160px; gap: 10px; }
  .lista-filas { margin-left: calc(var(--col) * 2 + var(--gutter) * 2); }
  .fila { height: calc((var(--col) * 4 + var(--gutter) * 3 - 20px) / 6 * 1.25); gap: 4px; margin-bottom: 4px; }
  .trab-cuenta, .trab-nombre { position: fixed; mix-blend-mode: normal; color: var(--negro); opacity: 1; top: 200px; }
  .trab-cuenta { left: 16px; width: auto; }
  .trab-nombre { left: calc(16px + 34px); width: calc(var(--col) * 2 + var(--gutter) * 2 - 50px); }
}
@media (max-width: 740px) {
  .trab-lista { padding-top: 100px; }
  .fila { width: calc(var(--col) * 4 + var(--gutter) * 3 + 16px); flex-wrap: nowrap; gap: 2px; height: 65px; margin-bottom: 2px; overflow-x: scroll; scrollbar-width: none; }
  .fila::-webkit-scrollbar { display: none; }
  .trab-cuenta, .trab-nombre { top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .fondo, .trab, .trab.abierta, .trab-scroll, .ficha-img, .ficha-pie, .fila img { transition: none; }
}