@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("inter700.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-weight: 400; font-style: normal; font-display: swap; src: url("courierprime.woff2") format("woff2"); }

:root {
  --gris: #969696;
  --gris-100: #efefee;
  --gris-200: #afadac;
  --azul: #33f;
  --c: var(--gris);
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { background: #fff; -webkit-text-size-adjust: 100%; tab-size: 4; text-wrap: pretty; font-synthesis: none; text-rendering: optimizeLegibility; scroll-behavior: auto; }
body {
  background: transparent; color: var(--c); font-family: var(--mono); font-size: .8125rem; line-height: 14px; letter-spacing: -.025em;
  text-underline-offset: 2px; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 100rem) { body { font-size: .875rem; line-height: 15px; } }
@media (min-width: 120rem) { body { font-size: .9375rem; line-height: 16px; } }
body.azul { --c: var(--azul); }
::selection { background: var(--gris); color: #fff; }
.azul ::selection, .azul::selection { background: var(--azul); color: #fff; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ul { list-style: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; cursor: pointer; white-space: nowrap; width: max-content; text-align: inherit; }
[role="button"] { cursor: pointer; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; }
.salto:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; margin: 0; padding: 6px 10px; clip-path: none; background: var(--gris-100); z-index: 99; border-radius: 4px; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, .arrastrable:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 2px; }
#vista:focus { outline: none; }


.hd, .dot, .sel { position: relative; }
.hd::before, .dot::before, .sel::before {
  content: ""; position: absolute; left: -12px; top: 4px; width: 6px; height: 6px; border: 1px solid transparent; border-radius: 1px;
  background: currentColor; opacity: 0; pointer-events: none;
}
.dot::before { opacity: 1; }
@media (hover: hover) {
  .hd:hover::before, .sel:hover::before { opacity: 1; }
}
.dot-inactivo::before { opacity: 1; background: transparent; border-color: currentColor; }
@media (hover: hover) {
  .grupo:hover .dot-inactivo::before { border-color: transparent; }
  .grupo .dot-inactivo:hover::before { background: currentColor; border-color: transparent; }
}


.cab { position: fixed; top: 0; left: 0; z-index: 50; padding: 12px; }
.cab ul { padding-left: 12px; pointer-events: none; }
.cab li { width: max-content; transition: color .3s; }
.cab a { pointer-events: auto; }


.cab2, .bloque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding: 12px; pointer-events: none; }
.cab2 { position: fixed; inset: 0 0 auto 0; }
.cab2 header, .bloque section { grid-column: 2; }
.max { max-width: 32rem; user-select: text; }
.max ul, .auto ul { pointer-events: none; }
.max li { width: max-content; }
.max li a { pointer-events: auto; }
.auto { pointer-events: auto; }
.auto h1 { width: max-content; user-select: text; }
.prose { max-width: 32rem; user-select: text; -webkit-user-select: text; pointer-events: auto; }
@media (hover: hover) { .prose a:hover { text-decoration: underline; } }
@media (min-width: 48rem) {
  .cab2, .bloque { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cab2 header { grid-column: 2 / span 2; }
  .bloque section { grid-column: 2 / span 2; }
  .bloque.texto section { grid-column: 4 / span 3; }
  .indent { margin-left: auto; }
  .indent > :nth-child(2n) { padding-left: 3.5rem; }
}
@media (max-width: 47.99rem) { .indent > :not(:last-child) { margin-bottom: 14px; } }


.titulo-caja {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: center; text-align: center; padding: 12px 12px 18px;
  color: var(--c);
}
.titulo-caja[hidden] { display: none; }
.titulo-p {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-size: calc(12.22vw - 2.9328px); white-space: normal;
}
.titulo-p.una-linea { white-space: nowrap; }
#gl, #txt { position: fixed; inset: 0; width: 100%; height: 100%; display: none; }
@media (min-width: 48rem) {
  .titulo-p { display: none; }
  .titulo-caja.gl #gl { display: block; }
  .titulo-caja.dos #txt { display: block; }
}


.galeria { --h: 60svh; --m: calc((100svh - var(--h)) * .5); position: relative; pointer-events: none; padding-top: calc(var(--m) + var(--h) + .75rem); padding-bottom: var(--m); }
.galeria.proy { z-index: 10; pointer-events: none; padding-bottom: calc(var(--m) - 3rem); }
.galeria ul { display: flex; flex-direction: column; gap: 12px; }
.project { position: relative; pointer-events: none; }
.foto {
  display: block; margin-inline: auto; height: var(--h); width: calc(var(--h) * var(--r)); overflow: clip; border-radius: 4px; background: var(--gris-100); pointer-events: auto;
  filter: saturate(.92) contrast(1.02);
}
.foto img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
@media (orientation: portrait) {
  .galeria { --h: calc((100vw - 1.5rem) * .5625); margin-top: calc(var(--m) - 4.5rem); }
  .project { height: calc(100svh - 9rem); }
  .foto { --w: calc(100vw - 1.5rem); --h: calc(var(--w) / var(--r)); --m: calc((100svh - var(--h)) * .5); width: var(--w); position: sticky; top: var(--m); }
  .foto[data-v] { --w: calc((200vw / 3) - 1.25rem); }
}
@media (min-width: 100rem) { .galeria { } }


.aviso-caja { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding: 12px; pointer-events: none; }
.aviso { grid-column: 2; max-width: 32rem; margin-left: auto; width: 100%; pointer-events: auto; color: inherit; }
.aviso a { text-decoration: underline; }
@media (min-width: 48rem) { .aviso-caja { grid-template-columns: repeat(6, minmax(0, 1fr)); } .aviso { grid-column: 4 / span 3; } }
@media (orientation: portrait) { .aviso-caja { bottom: 56px; } .laminas .aviso-caja { bottom: auto; } }
.text-caption { font-size: .5rem; line-height: 12px; letter-spacing: -.025em; }
@media (min-width: 100rem) { .text-caption { font-size: .625rem; line-height: 13px; } }
@media (min-width: 120rem) { .text-caption { font-size: .75rem; line-height: 14px; } }


.proyecto .envoltorio { pointer-events: none; }
.proyecto .desc { display: grid; padding: 12px; }
@media (orientation: landscape) {
  .proyecto .desc { position: fixed; top: 0; right: 0; bottom: 0; width: calc(50vw + .375rem); overflow-y: auto; scrollbar-width: none; }
  .proyecto .desc::-webkit-scrollbar { display: none; }
  .proyecto .leer { display: none; }
  .proyecto .desc .prose:hover { background: #fff; }
}
@media (orientation: portrait) {
  .proyecto .envoltorio { position: fixed; inset: 0; overflow-y: auto; scrollbar-width: none; z-index: 5; display: flex; flex-direction: column; gap: 14px; }
  .proyecto .envoltorio::-webkit-scrollbar { display: none; }
  .proyecto .envoltorio:has(.desc[data-estado="expandido"]) { pointer-events: auto; z-index: 40; background: #fff; }
  .proyecto .cab2 { position: static; padding-bottom: 0; }
  .proyecto .desc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding-top: 0; }
  .proyecto .desc .leer, .proyecto .desc section { grid-column: 2; }
  .proyecto .leer { pointer-events: auto; text-decoration: underline; display: block; }
  .proyecto .desc[data-estado="colapsado"] section { display: none; }
  .proyecto .desc .prose { padding-bottom: 48px; }
}


.azul { color: var(--azul); }
.info article { position: relative; }
.info-col { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-height: 100svh; }
@media (min-width: 48rem) { .info .bloque.top { position: fixed; inset: 0 0 auto 0; z-index: 1; } }
.info .raya { padding-top: 0; padding-bottom: 0; user-select: none; }
.info .raya > div { grid-column: 2; }
@media (min-width: 48rem) { .info .raya { display: none; } }
.info .pieinfo { position: relative; min-height: 38px; }
@media (orientation: portrait) { .info .pieinfo { min-height: 96px; } .info .pieinfo .aviso-caja { bottom: 56px; } }
.info .pieinfo .aviso-caja { padding: 12px; }
.info .indent:hover { background: transparent; }
@media (min-width: 48rem) and (orientation: landscape) { .info .bloque.texto .prose:hover { background: #fff; } }
.info-galeria { padding: 12px; pointer-events: none; }
@media (orientation: landscape) {
  .info-galeria { position: fixed; top: 0; left: 0; z-index: 50; }
  .info-galeria > div { transform: translate(30vw, 7.5svh); }
}
@media (orientation: portrait) { .info-galeria { display: flex; min-height: 100svh; align-items: center; justify-content: center; } }
.arrastrable { pointer-events: auto; touch-action: none; width: min-content; cursor: grab; user-select: none; -webkit-user-select: none; position: relative; z-index: 50; }
.arrastrable.agarrado { cursor: grabbing; }
.info-fotos { --w: 50vw; --h: calc(var(--w) * 1.5); width: var(--w); height: var(--h); overflow: clip; border-radius: 4px; background: var(--gris-100); display: block; }
@media (min-width: 48rem) { .info-fotos { --w: calc((100vw - 18.75rem) * .125 + 1.5rem); } }
.info-fotos li { width: 100%; height: 100%; }
.info-fotos li[hidden] { display: none; }
.info-fotos img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.cuenta { display: flex; gap: 6px; justify-content: center; padding-top: 12px; pointer-events: none; }
.cuadro { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 1px; }
.cuadro.on { background: currentColor; }


.cesta { position: fixed; top: 0; right: 0; z-index: 50; padding: 12px; }
.cesta > div { position: relative; background: var(--gris-100); border-radius: 4px; }
.chip { margin-left: auto; display: block; padding: 12px; text-align: right; line-height: 12px; white-space: nowrap; position: relative; }
.chip h2 { position: relative; }
.chip.hay h2 { padding-left: 0; }
.chip.hay h2::before { content: ""; position: absolute; left: -12px; top: 3px; width: 6px; height: 6px; background: currentColor; border-radius: 1px; }
.chip:focus-visible { outline-offset: -2px; }
.cesta-lista { position: absolute; top: calc(100% + 6px); right: 0; width: max-content; min-width: 14rem; max-width: calc(100vw - 24px); background: var(--gris-100); border-radius: 4px; padding: 12px; display: grid; gap: 6px; }
.cesta-lista[hidden] { display: none; }
.cesta-lista li { display: flex; justify-content: space-between; gap: 18px; }
.cesta-lista li button { text-decoration: underline; }
.cesta-lista .vacia[hidden] { display: none; }
.cesta-lista .consultar { margin-top: 6px; background: #fff; border-radius: 3px; padding: 9px 14px; line-height: 12px; }
.tienda { padding: 12px; }
.filtros ul { pointer-events: none; }
.filtros li { position: relative; width: max-content; pointer-events: auto; }
@media (orientation: landscape) {
  .filtros { position: fixed; inset: 0 0 auto 0; padding: 12px; z-index: 2; pointer-events: none; }
  .filtros ul { display: flex; flex-wrap: wrap; justify-content: center; width: calc(50vw - 1.125rem); margin-inline: auto; column-gap: 48px; }
}
@media (orientation: portrait) { .filtros { padding: 48px 12px 48px; margin-top: 42px; } }
.grilla {
  --h: calc((100vw - 12rem) / 4 * 1.5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; row-gap: 96px; padding: 0 12px 96px; position: relative;
}
@media (orientation: landscape) { .grilla { padding-top: 50svh; } }
@media (orientation: portrait) { .grilla { --h: calc((100vw - 1.5rem) / 2 * 1.5); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 48px; padding: 0 0 48px; } }
.grilla li[hidden] { display: none; }
.prod { position: relative; display: grid; gap: 12px; pointer-events: none; }
.prod .thumb { order: -1; position: relative; display: block; height: var(--h); overflow: hidden; border-radius: 4px; pointer-events: auto; background: var(--gris-100); }
.prod .thumb span { position: absolute; inset: 0; }
.prod .thumb .v { opacity: 0; }
@media (hover: hover) { .prod .thumb:hover .u { opacity: 0; } .prod .thumb:hover .v { opacity: 1; } }
.prod .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.prod header a { pointer-events: auto; position: relative; }
.prod header h2 { position: relative; width: max-content; }
@media (hover: hover) { .prod:hover header h2::before { opacity: 1; } }
.prod header h2::before { content: ""; position: absolute; left: -12px; top: 4px; width: 6px; height: 6px; background: currentColor; border-radius: 1px; opacity: 0; }
.prod .guardar { pointer-events: auto; text-decoration: underline; }
.prod .guardar[aria-pressed="true"] { text-decoration: none; }
.prod .guardar[aria-pressed="true"]::after { content: " ■"; font-size: .7em; }
.laminas .aviso-caja { position: static; padding: 12px 0 12px; }


.pie-fijo { position: fixed; left: 0; bottom: 0; z-index: 50; pointer-events: none; }
.pie-fila { display: flex; align-items: flex-end; gap: 12px; padding: 12px; width: max-content; max-width: 100vw; }
@media (orientation: portrait) { .pie-fijo { width: 100vw; } .pie-fila { width: 100%; } }
.popup { display: grid; min-width: min-content; border-radius: 4px; background: var(--gris-100); white-space: nowrap; pointer-events: auto; }
.popup[hidden] { display: none; }
.popup > header { order: 99; padding: 12px 24px; line-height: 12px; position: relative; scroll-margin: 12px; }
.popup > header h2 { position: relative; }
.popup > header h2::before { content: ""; position: absolute; left: -12px; top: 3px; width: 6px; height: 6px; background: currentColor; border-radius: 1px; opacity: 0; }
@media (hover: hover) { .popup > header:hover h2::before { opacity: 1; } }
.popup > header[aria-expanded="true"] h2::before { opacity: 1; }
.popup-c { min-width: calc((100vw - 5.25rem) / 6); }
.popup-c[hidden] { display: none; }
@media (orientation: portrait) { .popup-c { min-width: calc(100vw - 2.25rem); } }
.popup form { display: flex; gap: 6px; padding: 6px; }
.popup input { flex: 1 1 auto; min-width: 0; width: 100%; border-radius: 4px; background: transparent; padding: 10px 18px; line-height: 12px; outline: none; font: inherit; letter-spacing: inherit; color: inherit; }
.popup input::placeholder { color: color-mix(in oklab, currentColor 50%, transparent); opacity: 1; }
.popup input:focus-visible { outline: 1px solid color-mix(in oklab, currentColor 40%, transparent); outline-offset: -1px; }
.popup form button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; background: var(--azul); color: #fff; transition: background-color .15s var(--ease), color .15s var(--ease); }
.popup form button:disabled { background: #fff; color: var(--gris); cursor: default; }
.popup .ok { padding: 18px 24px; line-height: 12px; white-space: normal; }
.popup .ok[hidden] { display: none; }

.aviso-flotante { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60; background: var(--gris-100); color: var(--gris); border-radius: 4px; padding: 12px 18px; line-height: 12px; max-width: calc(100vw - 24px); white-space: normal; text-align: center; }
.aviso-flotante[hidden] { display: none; }
body.azul .aviso-flotante { color: var(--azul); }


.vela-caja { position: fixed; right: calc(16.6vw + 12px); bottom: 76px; z-index: 40; pointer-events: none; }
.vela-caja .arrastrable { width: max-content; z-index: 50; }
.vela-on { width: 80.4px; outline-offset: 4px; }
.llama { width: 12px; height: 24px; margin: 0 auto; position: relative; }
.llama-svg { display: block; transform-origin: 50% 100%; animation: llama .9s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px rgba(255, 170, 70, .5)); }
@keyframes llama {
  0% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(.94, 1.06) skewX(-2.5deg); }
  60% { transform: scale(1.04, .96) skewX(2deg); }
  100% { transform: scale(.97, 1.03) skewX(-1deg); }
}
.vela-cuerpo { display: flex; align-items: flex-end; width: max-content; overflow: clip; animation: vela-se-consume 180s ease-in-out infinite; }
.vela-in { width: max-content; height: max-content; }
.vela-svg { display: block; width: auto; height: 16rem; }
@keyframes vela-se-consume { 0% { height: 16rem; } to { height: 0; } }
.vela-off { pointer-events: auto; padding: 12px 24px; border-radius: 4px; background: var(--gris-100); white-space: nowrap; line-height: 12px; }
.vela-off h2 { position: relative; }
.vela-off h2::before { content: ""; position: absolute; left: -12px; top: 3px; width: 6px; height: 6px; background: currentColor; border-radius: 1px; opacity: 0; }
@media (hover: hover) { .vela-off:hover h2::before { opacity: 1; } }
.vela-off[hidden], .vela-on[hidden] { display: none; }
@media (orientation: portrait) { .vela-caja { display: none; } }
body.sin-vela .vela-caja { display: none; }


.pagina { animation: entra .22s var(--ease) both; }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pagina { animation: none; }
  .llama-svg { animation: none; }
  .vela-cuerpo { animation: none; height: 16rem; }
  .popup form button { transition: none; }
}