/* ==========================================================================
   Animal Libre — v18
   ========================================================================== */
/* el menú cerrado no debe atrapar clics */
.mil-menu-frame:not(.mil-active), .mil-menu-frame:not(.mil-active) * { pointer-events: none !important; }

/* ---------- Fondo del encabezado: fundido cruzado claro ↔ oscuro ---------- */
.mil-frame .mil-frame-top::before, .mil-frame .mil-frame-top::after { content: ""; position: absolute; left: -100vw; right: -100vw; top: -60px; bottom: -40px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .7s cubic-bezier(.4,0,.2,1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%); }
.mil-frame .mil-frame-top::before, .mil-frame.al-oscuro .mil-frame-top::before { background: rgba(250,247,243,.72); }
.mil-frame .mil-frame-top::after { background: rgba(11,7,16,.66); }
/* el velo claro cubre lo que hay de sección clara bajo el encabezado y el oscuro, lo que hay de oscura:
   al-main.js calcula el corte (--al-c1 / --al-c2, en px dentro del velo) al hacer scroll */
.mil-frame .mil-frame-top::before { clip-path: inset(var(--al-l1, 0px) 0 var(--al-l2, 0px) 0); }
.mil-frame .mil-frame-top::after { clip-path: inset(var(--al-d1, 100%) 0 var(--al-d2, 0px) 0); }
.mil-frame .mil-frame-top::before, .mil-frame .mil-frame-top::after { transition: opacity .6s ease; }
@media (min-width: 1201px) {
  html.al-lejos .mil-frame .mil-frame-top::before, html.al-lejos .mil-frame.al-oscuro .mil-frame-top::before,
  html.al-lejos .mil-frame .mil-frame-top::after, html.al-lejos .mil-frame.al-oscuro .mil-frame-top::after { opacity: 1; }
}
/* el logo cambia de color con un fundido, no de golpe */
.mil-frame .mil-frame-top .mil-logo { position: relative; }

/* ---------- Logo que se reduce a la golondrina (v19: barrido difuminado) ---------- */
.mil-frame .mil-logo img.al-logo {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.6) 48%, transparent 58%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.6) 48%, transparent 58%, transparent 100%);
  -webkit-mask-size: 240% 100%; mask-size: 240% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
  transition: -webkit-mask-position 1.1s cubic-bezier(.65,0,.25,1), mask-position 1.1s cubic-bezier(.65,0,.25,1), opacity .5s ease, filter .9s ease, transform 1.1s cubic-bezier(.65,0,.25,1);
}
html.al-lejos .mil-frame .mil-logo img.al-logo {
  -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0 !important; filter: blur(1.5px); transform: translateX(-6px);
  transition: -webkit-mask-position 1.2s cubic-bezier(.65,0,.25,1), mask-position 1.2s cubic-bezier(.65,0,.25,1), opacity .45s ease .75s, filter 1s ease, transform 1.2s cubic-bezier(.65,0,.25,1);
}
.mil-frame .mil-logo .al-logo-golo { position: absolute; left: 0; top: 50%; height: 91% !important; width: auto !important; transform: translateY(-50%); transform-origin: 30% 60%; opacity: 0; pointer-events: none; display: block !important; transition: opacity .5s ease, transform .6s ease; }
html.al-lejos .mil-frame .mil-logo .al-logo-golo { opacity: 1; transform: translateY(-52%); transition: opacity .6s ease .55s, transform 1.4s cubic-bezier(.2,.8,.2,1) .4s; }
html.al-lejos .mil-frame .mil-logo:hover .al-logo-golo { transform: translateY(-58%) rotate(-6deg) scale(1.06); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.mil-frame .al-logo-pista { position: absolute; left: 42px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; font-family: var(--serif); font-style: italic; font-size: .98rem !important; line-height: 1 !important; color: var(--violeta, #7E17BE); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .4s ease; }
.mil-frame.al-oscuro .al-logo-pista { color: var(--lila); }
html.al-lejos .mil-frame .mil-logo:hover .al-logo-pista, html.al-lejos .mil-frame .mil-logo:focus-visible .al-logo-pista { opacity: 1; transform: translate(0, -50%); }
html.al-lejos .mil-frame .mil-logo { cursor: pointer; }
@media (max-width: 1200px) { .mil-frame .al-logo-pista { display: none; } }
@media (prefers-reduced-motion: reduce) { .mil-frame .mil-logo img.al-logo, .mil-frame .mil-logo .al-logo-golo { transition-duration: .01s !important; transition-delay: 0s !important; } }

/* ---------- Archivo secreto de Alita ---------- */
.al-alita { position: fixed; inset: 0; z-index: 1100; display: grid; grid-template-rows: auto 1fr; background: radial-gradient(55% 65% at 22% 50%, rgba(126,23,190,.24), transparent 70%), radial-gradient(40% 50% at 30% 80%, rgba(233,59,36,.1), transparent 70%), #08050c; color: var(--hueso); opacity: 0; transition: opacity .5s ease; }
.al-alita.al-visible { opacity: 1; }
.al-alita[hidden] { display: none; }
.al-al-cuerpo { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 70px); min-height: 0; padding: 0 0 0 clamp(20px, 4vw, 60px); }
.al-al-visual { position: relative; min-height: 0; }
.al-al-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.al-al-texto { position: relative; min-height: 0; overflow-y: auto; padding: 0 clamp(20px, 5vw, 90px) 18vh 0; scrollbar-width: thin; scrollbar-color: rgba(244,239,233,.2) transparent; }
.al-al-barra { position: sticky; top: 0; z-index: 2; height: 2px; margin-bottom: 4vh; background: rgba(244,239,233,.08); }
.al-al-barra i { display: block; height: 100%; background: linear-gradient(90deg, #7E17BE, #E93B24); transform: scaleX(0); transform-origin: 0 50%; }
.al-al-cap, .al-al-bloque { padding: 6vh 0; border-bottom: 1px solid rgba(244,239,233,.08); }
.al-al-cap { opacity: .32; transition: opacity .6s ease; }
.al-al-cap.al-activo, .al-al-logo.al-activo { opacity: 1; }
.al-al-bloque { border-bottom: 1px solid rgba(244,239,233,.08); }
.al-al-intro { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-top: 0; }
.al-al-k { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lila); }
.al-al-k b { font-weight: 500; color: #f05c40; letter-spacing: .1em; }
.al-alita h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 1.4rem + 3.4vw, 5rem); line-height: .98; letter-spacing: -0.04em; color: #fff; }
.al-alita h2 em, .al-alita h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--lila); }
.al-alita h2 em { display: block; font-size: .7em; margin-top: 10px; }
.al-alita h3 { margin: 0 0 18px; font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.al-alita p { font-size: 1.04rem; line-height: 1.65; color: rgba(244,239,233,.8); margin: 0 0 14px; max-width: 34em; }
.al-al-lead { font-size: 1.2rem !important; margin-top: 26px !important; }
.al-al-baja { margin-top: 40px !important; font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,239,233,.4) !important; display: flex; align-items: center; gap: 12px; }
.al-al-baja::before { content: ""; width: 1px; height: 38px; background: linear-gradient(rgba(244,239,233,0), rgba(244,239,233,.6)); animation: al-al-gota 2.4s ease-in-out infinite; }
@keyframes al-al-gota { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }
.al-al-fuente { margin-top: 18px !important; font-size: .74rem !important; color: rgba(244,239,233,.38) !important; }
.al-al-logos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; }
.al-al-logo { padding: 26px 0; border-bottom: 0; border-top: 1px solid rgba(244,239,233,.06); }
.al-al-logo figure { margin: 0; display: grid; grid-template-columns: 148px 1fr; gap: 24px; align-items: center; }
.al-al-logo figure > div { display: grid; place-items: center; height: 120px; border-radius: 14px; background: #f4efe9; padding: 14px; }
.al-al-logo img { max-width: 100%; max-height: 92px; width: auto; height: auto; }
.al-al-logo figcaption { font-size: 1rem; line-height: 1.55; color: rgba(244,239,233,.75); }
.al-al-logo figcaption b { display: block; margin-bottom: 4px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3rem; color: #fff; }
.al-al-degrade { height: 14px; border-radius: 99px; margin: 8px 0 26px; background: linear-gradient(90deg, #7E17BE, #B42A9A 55%, #E93B24); box-shadow: 0 0 40px rgba(180,42,154,.35); }
.al-al-colores { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.al-al-colores li { display: grid; grid-template-columns: 40px auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
.al-al-colores i { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(244,239,233,.18); }
.al-al-colores b { font-weight: 500; color: #fff; font-size: .98rem; }
.al-al-colores code { justify-self: start; font-size: .74rem; color: rgba(244,239,233,.45); background: none; padding: 0; }
.al-al-colores span { grid-column: 2 / 4; font-size: .92rem; color: rgba(244,239,233,.7); }
.al-al-temas { list-style: none; margin: 6px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.al-al-temas li { padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(207,168,239,.35); font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: #fff; }
.al-al-enlace { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: #fff; font-weight: 500; border-bottom: 1px solid rgba(244,239,233,.3); padding-bottom: 4px; }
.al-al-enlace .al-icono { width: 16px; height: 16px; transform: rotate(-45deg); }
.al-al-enlace:hover { color: var(--lila); border-color: var(--lila); }
.al-al-final { border-bottom: 0; }
.al-al-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }
@media (max-width: 991px) {
  .al-al-cuerpo { grid-template-columns: 1fr; grid-template-rows: 30vh 1fr; padding: 0; }
  .al-al-texto { padding: 0 20px 14vh; }
  .al-al-intro { min-height: 0; padding-top: 3vh; }
  .al-al-cap { opacity: 1; }
  .al-al-logo figure { grid-template-columns: 104px 1fr; gap: 16px; }
  .al-al-logo figure > div { height: 92px; }
}

/* ---------- Pie: crédito de identidad ---------- */
.al-cierre-violet { order: 9; flex-basis: 100%; margin: 0; font-size: .78rem; color: rgba(244,239,233,.42); }
.al-cierre-violet a { color: rgba(244,239,233,.7) !important; border-bottom: 1px solid rgba(244,239,233,.2); }
.al-cierre-violet a:hover { color: #fff !important; }

/* ---------- Red: AVA Buenos Aires 2025 ---------- */
.al-red-ava { display: grid; gap: 2px; margin: 0 0 14px !important; padding: 12px 16px; border-left: 3px solid var(--violeta, #7E17BE); background: rgba(126,23,190,.06); border-radius: 0 10px 10px 0; font-size: .95rem; }
.al-red-ava b { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.al-red-ava small { font-size: .76rem; opacity: .6; }

/* ---------- Quiénes somos: valores ---------- */
.al-valores-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244,239,233,.1); border: 1px solid rgba(244,239,233,.1); border-radius: 22px; overflow: hidden; }
.al-valor { position: relative; padding: clamp(24px, 3vw, 40px); background: #0e0a14; transition: background .4s ease; }
.al-valor:hover { background: #150e1d; }
.al-valor span { display: block; margin-bottom: 26px; font-size: .74rem; letter-spacing: .16em; color: #f05c40; }
.al-valor h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; color: #fff; }
.al-valor p { margin: 0; color: rgba(244,239,233,.7); line-height: 1.6; }
.al-valor-bandada { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; margin-top: 28px; padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: linear-gradient(110deg, rgba(126,23,190,.28), rgba(233,59,36,.14)); border: 1px solid rgba(207,168,239,.18); }
.al-valor-golo { width: 54px; height: 88px; fill: url(#al-grad-marca); }
.al-valor-bandada h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); color: #fff; letter-spacing: -0.02em; }
.al-valor-bandada p { margin: 0; color: rgba(244,239,233,.75); max-width: 46em; }
@media (max-width: 991px) {
  .al-valores-grid { grid-template-columns: 1fr 1fr; }
  .al-valor-bandada { grid-template-columns: 1fr; }
  .al-valor-golo { width: 40px; height: 64px; }
}
@media (max-width: 575px) { .al-valores-grid { grid-template-columns: 1fr; } }

/* ---------- v19 · Revelado de fotos: duotono de marca que se abre como una mirada ---------- */
html.al-js .al-revela img { opacity: 1; }
.al-revela { position: relative; overflow: hidden; isolation: isolate; }
html.al-js .al-revela > img { -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, #000 calc(var(--al-r, 0%) - 22%), transparent var(--al-r, 0%)); mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, #000 calc(var(--al-r, 0%) - 22%), transparent var(--al-r, 0%)); }
html.al-js .al-revela.al-revela--fin > img { -webkit-mask-image: none; mask-image: none; }
.al-revela .al-revela-duo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: url(#al-duotono) contrast(1.05); pointer-events: none; z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, #000 calc(var(--al-r, 0%) - 22%), transparent var(--al-r, 0%)); mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, #000 calc(var(--al-r, 0%) - 22%), transparent var(--al-r, 0%)); }
.al-revela::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 46%, rgba(126,23,190,.16), transparent 70%), #ece6df; }
.al-revela:not(.al-revela--claro)::before { background: radial-gradient(60% 50% at 50% 46%, rgba(126,23,190,.28), transparent 70%), #120c18; }
.al-revela-lienzo { display: none !important; }
@media (prefers-reduced-motion: reduce) { .al-revela > img, .al-revela .al-revela-duo { -webkit-mask-image: none; mask-image: none; } .al-revela .al-revela-duo { display: none; } }