/* =====================================================================
   MOVIMIENTO ZOE · módulo común de transiciones (21/10/2026)
   Inspirado en los movimientos del video de Pinterest que eligió Brayan
   (especificación: proyecto-zoe/TRANSICIONES-PINTEREST.md).
   Mismo archivo en las 4 partes: Zoe Center, Casa Zoe, Instituto y Art….
   Cómo usarlo: ver comun/LEEME.md.

   Reglas que cumple:
   · Sin JavaScript todo se ve: los estados «escondidos» solo existen con
     html.mz-activo, que pone movimiento-zoe.js.
   · prefers-reduced-motion: sin entrada con logo, sin encimado y sin
     desenfoque; solo fundidos cortos.
   · Nunca dos logos: la entrada tapa la página y su logo se apaga antes
     de que se abra la cortina.
   · Nada se queda vacío: hay salvavidas por tiempo.
   ===================================================================== */

:root {
  --mz-verde-osc: var(--green-dark, #013A27);
  --mz-verde: var(--green, #016936);
  --mz-arena: var(--sand, #D8C491);
  --mz-arena-50: var(--sand-50, #fbf6e9);
  --mz-verde-50: var(--green-50, #eef6f1);
  --mz-titulo: var(--f-display, "Jost", "Avenir Next", "Futura", sans-serif);
  --mz-suave: cubic-bezier(.16, 1, .3, 1);
  --mz-telon: cubic-bezier(.76, 0, .24, 1);
}

/* ---------- 1. Entrada con el logo (máx. 1.2 s, una vez por sesión) ---------- */
/* Mientras el logo está a la vista, la página se arma oculta DEBAJO del telón (sus animaciones corren normal).
   En cuanto el logo se apaga (0.8 s), el script pone html.mz-telon-abre: la página ya se ve y el telón sube encima.
   Al terminar, el script quita mz-entrando y pone html.mz-tras-entrada (para que cada sitio lo use si quiere).
   Salvavidas: aunque el JavaScript fallara a medias, la página aparece sola a los 2 s. */
html.mz-entrando:not(.mz-telon-abre) body > :not(.mz-entrada) { visibility: hidden; animation: mz-salvavidas 0s linear 2s forwards; }
@keyframes mz-salvavidas { to { visibility: visible; } }
html.mz-entrando body { overflow: hidden; }
.mz-entrada { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 45%, #fff, rgb(255 255 255 / 0) 70%), var(--mz-arena-50);
  animation: mz-telon .34s var(--mz-telon) .8s forwards; }
@keyframes mz-telon { to { transform: translateY(-100%); } }
.mz-entrada-marca { position: relative; display: flex; align-items: center; gap: 14px; animation: mz-marca-sale .12s ease-in .68s forwards; }
@keyframes mz-marca-sale { to { opacity: 0; transform: translateY(-8px); } }
.mz-entrada-punto { position: absolute; left: 28px; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--mz-arena);
  animation: mz-punto .5s var(--mz-suave) both; }
@keyframes mz-punto { 0% { transform: scale(0); opacity: 1; } 45% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
.mz-entrada-arbol { width: 56px; height: auto; opacity: 0; transform: scale(.5); animation: mz-arbol .32s var(--mz-suave) .22s forwards; }
@keyframes mz-arbol { to { opacity: 1; transform: none; } }
.mz-entrada-nombre { font-family: var(--mz-titulo); font-weight: 300; text-transform: uppercase; letter-spacing: .32em; font-size: clamp(1.1rem, 3.6vw, 1.7rem); color: var(--mz-verde-osc); white-space: nowrap; }
.mz-entrada-nombre span { opacity: 0; animation: mz-letra .08s linear forwards; animation-delay: calc(.34s + var(--i) * var(--paso, 30ms)); }
@keyframes mz-letra { to { opacity: 1; } }

/* ---------- 2. Menú en «píldora» flotante al bajar ---------- */
/* Se pone data-mz-pildora en el encabezado (sticky) del sitio. */
[data-mz-pildora] { max-width: 100%; margin-inline: auto; transition: max-width .5s var(--mz-suave), top .5s var(--mz-suave), border-radius .5s var(--mz-suave), box-shadow .4s, background-color .4s, border-color .4s; }
[data-mz-pildora].mz-pildora { top: 12px !important; max-width: min(1120px, calc(100% - 24px)); border-radius: 999px; border: 1px solid rgb(216 196 145 / .55) !important;
  background: rgb(255 255 255 / .72) !important; -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 14px 36px -14px rgb(1 40 27 / .3), 0 2px 6px rgb(1 40 27 / .06) !important; }
[data-mz-pildora].mz-pildora > * { padding-inline: clamp(14px, 2vw, 24px); }
[data-mz-boton-pildora] { display: none !important; }
@media (max-width: 960px) {
  [data-mz-pildora].mz-pildora { max-width: calc(100% - 20px); top: 10px !important; }
  [data-mz-pildora].mz-pildora [data-mz-ocultar-en-pildora] { display: none !important; }
  [data-mz-pildora].mz-pildora [data-mz-boton-pildora] { display: inline-flex !important; margin-left: auto; }
  [data-mz-pildora].mz-pildora [data-mz-boton-pildora] + * { margin-left: .4rem !important; }
}

/* ---------- 3. Títulos palabra por palabra ---------- */
html.mz-activo [data-mz-palabras] .mz-p { display: inline-block; opacity: .12; filter: blur(6px); transform: translateY(12px);
  transition: opacity .55s var(--mz-suave), filter .55s var(--mz-suave), transform .55s var(--mz-suave); transition-delay: calc(var(--i) * 70ms); }
html.mz-activo [data-mz-palabras].mz-ver .mz-p { opacity: 1; filter: none; transform: none; }

/* ---------- 4. Secciones que se enciman como hojas ---------- */
/* la hoja que sube debe ser opaca: si la sección no tiene fondo propio, se usa --mz-hoja (blanco por omisión) */
[data-mz-encimar] { position: relative; z-index: 2; margin-top: -24px; border-radius: 24px 24px 0 0; background-color: var(--mz-hoja, #fff); box-shadow: 0 -22px 44px -24px rgb(1 40 27 / .28); }
.mz-fijo { position: sticky; z-index: 1; }
.mz-sombra { position: absolute; inset: 0; z-index: 50; pointer-events: none; background: rgb(1 30 20); opacity: var(--mz-o, 0); }
@media (max-width: 767px) { .mz-fijo { position: relative; top: auto !important; } .mz-sombra { display: none; } }

/* ---------- 5. El punto dorado que se vuelve etiqueta ---------- */
[data-mz-etiqueta] { display: inline-flex !important; width: fit-content !important; max-width: 100%; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; background: var(--mz-arena-50); box-shadow: inset 0 0 0 1px var(--mz-arena); }
[data-mz-etiqueta]::before, [data-mz-etiqueta]::after { display: none !important; }
html.mz-activo [data-mz-etiqueta] { clip-path: inset(calc(50% - 5px) calc(50% - 5px) round 999px); background-color: var(--mz-arena); color: transparent;
  transition: clip-path .6s var(--mz-suave) .1s, background-color .3s ease .35s, color .3s ease .5s; }
html.mz-activo [data-mz-etiqueta].mz-ver { clip-path: inset(0 0 0 0 round 999px); background-color: var(--mz-arena-50); color: var(--mz-verde-osc); }
/* variante para fondos oscuros: data-mz-etiqueta="clara" */
[data-mz-etiqueta="clara"] { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(216 196 145 / .7); color: #fff; }
html.mz-activo [data-mz-etiqueta="clara"].mz-ver { background-color: rgb(255 255 255 / .1); color: #fff; }

/* ---------- 6. Tarjetas en cascada y brillo suave ---------- */
html.mz-activo [data-mz-cascada] > * { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--mz-suave), transform .7s var(--mz-suave); transition-delay: calc(min(var(--i, 0), 8) * 80ms); }
html.mz-activo [data-mz-cascada].mz-ver > * { opacity: 1; transform: none; }
[data-mz-brillo] { position: relative; isolation: isolate; }
.mz-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mz-luz::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -55%; height: 110%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(216 196 145 / .55), rgb(217 235 224 / .35) 55%, rgb(255 255 255 / 0)); filter: blur(10px);
  opacity: 0; transform: translateY(30%); transition: opacity 1.2s ease, transform 1.4s var(--mz-suave); }
[data-mz-brillo].mz-ver .mz-luz::before { opacity: 1; transform: none; animation: mz-respira 7s ease-in-out 1.4s infinite alternate; }
@keyframes mz-respira { to { transform: translateY(-6%) scale(1.04); } }

/* ---------- 7. Videos decorativos: no reciben el mouse (sin botón de «sacar video»); el clic pasa a lo de encima ---------- */
video[data-mz-deco] { pointer-events: none; }

/* ---------- Movimiento reducido: solo fundidos cortos ---------- */
@media (prefers-reduced-motion: reduce) {
  .mz-entrada { display: none !important; }
  html.mz-entrando body > :not(.mz-entrada) { visibility: visible !important; }
  html.mz-activo [data-mz-palabras] .mz-p { filter: none; transform: none; transition: opacity .3s; transition-delay: 0s; }
  html.mz-activo [data-mz-etiqueta] { clip-path: none; background-color: var(--mz-arena-50); color: var(--mz-verde-osc); opacity: 0; transition: opacity .3s; }
  html.mz-activo [data-mz-etiqueta="clara"] { background-color: rgb(255 255 255 / .1); color: #fff; }
  html.mz-activo [data-mz-etiqueta].mz-ver { opacity: 1; }
  html.mz-activo [data-mz-cascada] > * { transform: none; transition: opacity .3s; transition-delay: 0s; }
  .mz-fijo { position: relative; top: auto !important; }
  .mz-sombra { display: none; }
  [data-mz-brillo].mz-ver .mz-luz::before { animation: none; transition: opacity .3s; transform: none; }
  [data-mz-pildora] { transition: none; }
}