/* efecto — preloader */
html.is-loading, html.is-loading body { overflow: hidden; }
.no-js .efx-loader { display: none; }

.efx-loader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--ink); color: var(--paper); overflow: hidden; cursor: progress; }
.efx-loader.is-open { background: transparent; pointer-events: none; }
.efx-loader.is-fade { opacity: 0; transition: opacity .2s linear; pointer-events: none; }

.efx-loader__curtain { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); pointer-events: none; }
.efx-cell { position: relative; background: var(--ink); transform: scale(1.02); }
.efx-cell::after { content: ''; position: absolute; inset: 0; background: var(--flash, transparent); opacity: 0; }
.efx-cell.c-a { --flash: var(--accent); }
.efx-cell.c-b { --flash: var(--cobalt); }
.efx-cell.c-l { --flash: var(--lime); }
/* solo transform + opacity (compuestos en GPU); will-change solo mientras anima */
.is-open .efx-cell { will-change: transform; animation: efx-cell-out .5s var(--ease-inout) var(--d, 0ms) forwards; }
.is-open .efx-cell::after { animation: efx-cell-flash .5s linear var(--d, 0ms) forwards; }
@keyframes efx-cell-out { 0%, 30% { transform: scale(1.02); } 100% { transform: scale(0); } }
@keyframes efx-cell-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }

.efx-loader__ui { position: absolute; inset: 0; padding: calc(var(--gutter) * .8) var(--gutter); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; transition: opacity .35s ease; }
.is-leaving .efx-loader__ui { opacity: 0; transition-delay: .12s; }

.efx-loader__brand { margin: 0; display: inline-flex; align-items: center; gap: .7em; font-family: var(--font-display); font-weight: 750; font-size: 1.5rem; letter-spacing: -0.04em; line-height: 1; }
.efx-loader__mark, .efx-logo__mark { position: relative; display: inline-block; width: 1.1em; height: 1.1em; font-size: 16px; flex: none; }
.efx-loader__mark i, .efx-logo__mark i { position: absolute; width: .62em; height: .62em; }
.efx-loader__mark i:first-child, .efx-logo__mark i:first-child { left: 0; top: 0; background: var(--accent); }
.efx-loader__mark i:last-child, .efx-logo__mark i:last-child { right: 0; bottom: 0; background: var(--cobalt); }
.efx-loader__meta { margin: 0; justify-self: end; color: var(--muted); align-self: start; padding-top: .4em; }

.efx-loader__stage { grid-column: 1 / -1; grid-row: 2; align-self: center; justify-self: center; display: grid; place-items: center; }
.efx-loader__grid { --px: clamp(13px, 2.2vw, 24px); display: grid; grid-template-columns: repeat(16, var(--px)); grid-template-rows: repeat(16, var(--px)); gap: 2px; }
.efx-px { display: block; background: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease-out), box-shadow .2s, background-color .15s; }
.efx-px.on { box-shadow: none; animation: efx-px-pop .34s steps(5) both; }
.efx-px--a.on { background: var(--accent); }
.efx-px--b.on { background: var(--cobalt); }
@keyframes efx-px-pop { 0% { transform: scale(1.9); background-color: var(--paper); } 100% { transform: scale(1); } }
.is-leaving .efx-px { transition: transform .5s var(--ease-inout), opacity .4s; transform: scale(0); opacity: 0; }
.is-leaving .efx-px:nth-child(3n) { transition-delay: .06s; } .is-leaving .efx-px:nth-child(3n+1) { transition-delay: .12s; }

.efx-loader__msg { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; margin: 0 0 .5rem; color: var(--paper-2); min-height: 1.4em; }
.efx-loader__count { grid-column: 1; grid-row: 3; align-self: end; margin: 0; font-family: var(--font-pixel); font-size: clamp(5rem, 17vw, 15rem); line-height: .78; letter-spacing: -0.02em; display: flex; align-items: flex-start; gap: .08em; transition: transform .6s var(--ease-inout); }
.efx-loader__count b { font-weight: 400; color: var(--accent); font-size: .34em; line-height: 1; margin-top: .18em; }
.is-leaving .efx-loader__count { transform: translateY(-14vh); }
.efx-loader__skip { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; margin-bottom: 2.6rem; font-family: var(--font-pixel); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .7em 1em; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); transition: color .3s, box-shadow .3s; }
.efx-loader__skip:hover, .efx-loader__skip:focus-visible { color: var(--ink); background: var(--lime); box-shadow: none; }
.efx-loader__skip kbd { font: inherit; opacity: .6; margin-left: .4em; }

@media (max-width: 760px) {
  .efx-loader__grid { --px: clamp(11px, 3.6vw, 16px); }
  .efx-loader__skip { margin-bottom: 1.6rem; }
  .efx-loader__msg { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-bottom: 7.6rem; align-self: end; }
  .efx-loader__count { font-size: clamp(4.4rem, 26vw, 8rem); }
}
@media (prefers-reduced-motion: reduce) { .efx-px.on { animation: none; } }

/* loader con los cubos reales: el canvas del motor pasa por encima del telón mientras arma el isotipo (el isotipo DOM queda de respaldo) */
/* el telón se vuelve transparente y el sitio se oculta: el canvas (z 0) queda como fondo y el texto del loader (z 100) siempre por encima del polvo */
html.efx-ldr3d .efx-loader:not(.is-fast) { background: transparent; }
html.efx-ldr3d:not(.efx-ldr3d-out) #content, html.efx-ldr3d:not(.efx-ldr3d-out) .efx-header, html.efx-ldr3d:not(.efx-ldr3d-out) .efx-rail { visibility: hidden; }
html.efx-ldr3d-out #content, html.efx-ldr3d-out .efx-header { animation: efx-ldr-in .8s var(--ease-out) backwards; }
@keyframes efx-ldr-in { from { opacity: 0; } to { opacity: 1; } }
html.efx-ldr3d .efx-loader:not(.is-fast) .efx-loader__stage { opacity: 0; transition: opacity .3s; }
/* protagonistas: los cubos. El contador baja de jerarquía y no lleva «%» (el glifo pixelado se leía como una ✕) */
html.efx-ldr3d .efx-loader:not(.is-fast) .efx-loader__count { font-size: clamp(3.4rem, 8vw, 7rem); color: var(--paper-2); line-height: .8; }
html.efx-ldr3d .efx-loader:not(.is-fast) .efx-loader__msg, html.efx-ldr3d .efx-loader:not(.is-fast) .efx-loader__meta { text-shadow: 0 0 10px var(--ink), 0 0 2px var(--ink); }
html.efx-ldr3d .efx-loader:not(.is-fast) .efx-loader__skip { background: rgba(13, 13, 16, .8); }
@media (max-width: 760px) { html.efx-ldr3d .efx-loader:not(.is-fast) .efx-loader__count { font-size: clamp(3rem, 17vw, 5.4rem); } }

/* llegada desde otra página / recarga: sin contador, solo el isotipo saltando + barra de 3px; la cortina abre apenas el sitio está listo */
.efx-loader__fast { display: none; }
.efx-loader.is-fast { cursor: auto; }
.efx-loader.is-fast .efx-loader__ui { display: none; }
.efx-loader.is-fast .efx-loader__fast { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .25s linear; }
.efx-loader.is-fast.is-open .efx-loader__fast, .efx-loader.is-fast.is-leaving .efx-loader__fast { opacity: 0; }
.efx-loader__fastmark { position: relative; width: 48px; height: 48px; display: block; font-size: 48px; }
.efx-loader__fastmark i { position: absolute; width: .56em; height: .56em; }
.efx-loader__fastmark i:first-child { left: 0; top: 0; background: var(--accent); animation: efx-hop-a 1.6s steps(1) infinite; }
.efx-loader__fastmark i:last-child { right: 0; bottom: 0; background: var(--cobalt); animation: efx-hop-b 1.6s steps(1) infinite; }
.efx-loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: rgba(241, 238, 230, .08); }
.efx-loader__bar i { display: block; width: 30%; height: 100%; background: var(--accent); animation: efx-bar 1.1s steps(12) infinite; }
@keyframes efx-bar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (hover: none) { .efx-loader__skip kbd { display: none; } }
/* si el arranque se pasa del tope, el contenido no queda invisible esperando a los reveals */
.is-late [data-reveal] { opacity: 1 !important; transform: none !important; visibility: visible !important; }

/* salida de página (solo navegadores sin View Transitions): cortina corta que cubre antes de navegar */
.efx-ptrans { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr); pointer-events: all; }
.efx-ptrans i { position: relative; background: var(--ink); transform: scale(0); will-change: transform; transition: transform .28s var(--ease-inout) var(--d, 0ms); }
.efx-ptrans i::after { content: ''; position: absolute; inset: 0; background: var(--flash, transparent); opacity: 0; }
.efx-ptrans i.c-a { --flash: var(--accent); } .efx-ptrans i.c-b { --flash: var(--cobalt); } .efx-ptrans i.c-l { --flash: var(--lime); }
.efx-ptrans.is-on i { transform: scale(1.02); }
.efx-ptrans.is-on i::after { animation: efx-ptrans-ink .3s linear calc(var(--d, 0ms) + .12s) both; }
@keyframes efx-ptrans-ink { 0% { opacity: 1; } 100% { opacity: 0; } }

/* View Transitions entre documentos (Chrome ≥126; el resto cae a la cortina de celdas).
   La página vieja se desarma por FILAS de píxeles: 14 franjas, cada una se borra de izquierda a derecha en pasos (steps) y con su propio retraso.
   La nueva no anima: ya llega con el telón de tinta, que recién abre (cortina de celdas) cuando esta salida terminó (_loader.js espera viewTransition.finished). */
@view-transition { navigation: auto; }
@property --efx-p { syntax: '<number>'; inherits: false; initial-value: 0; }
::view-transition-group(root) { animation-duration: .5s; }
::view-transition-old(root) {
  animation: efx-vt-rows .5s steps(14, end) both; mix-blend-mode: normal;
  -webkit-mask-image: linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.0) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.34) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.12) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.5) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.22) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.42) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.06) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.46) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.28) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.18) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.38) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.1) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.48) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.3) * 2, 1)) * 100%), transparent 0);
  mask-image: linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.0) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.34) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.12) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.5) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.22) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.42) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.06) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.46) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.28) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.18) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.38) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.1) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.48) * 2, 1)) * 100%), transparent 0),
    linear-gradient(90deg, #000 calc((1 - clamp(0, (var(--efx-p) * 1.5 - 0.3) * 2, 1)) * 100%), transparent 0);
  -webkit-mask-size: 100% 7.142857%; mask-size: 100% 7.142857%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0.0%, 0 7.6923%, 0 15.3846%, 0 23.0769%, 0 30.7692%, 0 38.4615%, 0 46.1538%, 0 53.8462%, 0 61.5385%, 0 69.2308%, 0 76.9231%, 0 84.6154%, 0 92.3077%, 0 100.0%; mask-position: 0 0.0%, 0 7.6923%, 0 15.3846%, 0 23.0769%, 0 30.7692%, 0 38.4615%, 0 46.1538%, 0 53.8462%, 0 61.5385%, 0 69.2308%, 0 76.9231%, 0 84.6154%, 0 92.3077%, 0 100.0%;
}
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes efx-vt-rows { from { --efx-p: 0; } to { --efx-p: 1; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }