/* ==========================================================================
   Animal Libre — capa v6 · «matriz madre»
   Sistema: tinta, hueso y papel; Heuvel Grotesk para display, Instrument
   Serif itálica para acentos, Outfit para texto. Animales como protagonistas.
   ========================================================================== */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/outfit-latin-wght-normal.woff2') format('woff2-variations'), url('fonts/outfit-latin-wght-normal.woff2') format('woff2'); }

:root {
  --tinta: #0b0710;
  --tinta-2: #15101b;
  --tinta-3: #201a27;
  --hueso: #f4efe9;
  --hueso-2: #ebe4dc;
  --papel: #fbf9f6;
  --texto: #1b1620;
  --texto-2: #5f5866;
  --texto-3: #8b8392;
  --lila: #cfa8ef;
  --violeta: #7E17BE;
  --magenta: #B42A9A;
  --rojo: #E93B24;
  --linea: rgba(27, 22, 32, .12);
  --linea-o: rgba(244, 239, 233, .14);
  --display: 'Heuvel Grotesk', 'Outfit', sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --texto-f: 'Outfit', sans-serif;
  --radio: 18px;
  --al-sec: clamp(96px, 11vw, 176px);
  --al-negro: var(--tinta);
  --al-hueso: var(--hueso);
}

html { background: var(--tinta); }
body { background: var(--papel); color: var(--texto); font-family: var(--texto-f); -webkit-font-smoothing: antialiased; }
p { color: var(--texto-2); line-height: 1.75; }
::selection { background: var(--violeta); color: #fff; }
.al-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Tipografía ---------- */
.al-titulo-xl, .al-titulo-l, .al-portada h1, .al-cierre h2, .al-cc-titulo, .al-anos-ano {
  font-family: var(--display); font-weight: 500; color: var(--texto);
}
.al-titulo-xl { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.9rem); line-height: 1.02; letter-spacing: -0.035em; }
.al-titulo-l { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; }
h1 em, h2 em, h3 em, .al-em, blockquote em, .al-menu-frase em, .al-cierre-base em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--violeta);
}
h1 em, h2 em { font-size: 1.08em; line-height: .9; }
.al-oscura h1 em, .al-oscura h2 em, .al-oscura h3 em, .al-cierre h2 em, .mil-menu-frame em, .al-cierre-base em { color: var(--lila); }
.al-oscura .al-titulo-xl, .al-oscura .al-titulo-l, .al-oscura h3 { color: var(--hueso); }
.al-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--texto-f); font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.al-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violeta); flex: none; }
.al-oscura .al-kicker, .al-cierre .al-kicker, .al-portada .al-kicker { color: rgba(244,239,233,.62); }
.al-oscura .al-kicker::before, .al-cierre .al-kicker::before { background: var(--lila); }
.al-lead { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); line-height: 1.7; color: var(--texto-2); }
.al-oscura p { color: rgba(244,239,233,.66); }
.al-cabecera { margin-bottom: clamp(48px, 6vw, 96px); gap: clamp(28px, 6vw, 110px); }
.al-cabecera p { font-size: 1.06rem; line-height: 1.75; max-width: 30rem; }
.al-cabecera > div:last-child .mil-link { margin-top: 18px; }
.al-sec--hueso { background: var(--hueso); }
.al-sec { background-color: var(--papel); }
.al-sec.al-oscura, .al-oscura { background: var(--tinta); }
.al-sec.al-sec--hueso { background: var(--hueso); }
.al-nota-fuente { margin-top: 32px; font-size: .8rem; color: var(--texto-3); letter-spacing: .02em; }
.al-oscura .al-nota-fuente { color: rgba(244,239,233,.4); }

/* Botones y enlaces más finos */
.mil-button { letter-spacing: .12em; font-weight: 500; }
.mil-button.al-claro { color: var(--tinta) !important; }
.mil-link { letter-spacing: .14em; }

/* ---------- Encabezado ---------- */
.mil-frame-top .al-derecha { gap: 14px; }
.al-cabecera-dona { pointer-events: all; display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 40px; border: 1px solid rgba(11,7,16,.22); color: var(--tinta); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-decoration: none; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.al-cabecera-dona:hover { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.mil-frame.al-oscuro .al-cabecera-dona { border-color: rgba(244,239,233,.3); color: var(--hueso); }
@media (max-width: 1200px) { .al-cabecera-dona { border-color: rgba(244,239,233,.3); color: var(--hueso); height: 34px; padding: 0 14px; } }
@media (max-width: 420px) { .al-cabecera-dona { display: none; } }

/* ---------- Telón ---------- */
.al-telon { background: var(--tinta); }
.al-telon-golo { width: 64px; height: 48px; color: var(--lila); fill: currentColor; opacity: 0; }
html.al-llegada .al-telon .al-telon-golo { opacity: 1; }

/* ---------- Preloader ---------- */
.mil-preloader { background: var(--tinta); }
.al-pre-palabras { display: block; }
.al-pre-palabras p { position: absolute; left: 0; right: 0; top: 50%; margin: -0.6em 0 0; text-align: center; font-family: var(--serif) !important; font-style: italic; font-weight: 400 !important; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem) !important; line-height: 1.2; color: var(--hueso) !important; }
.al-pre-marca { transform: translateY(96px); }
.al-pre-marca em { display: block; margin-top: 14px; opacity: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: var(--lila); }
.al-pre-carga { position: absolute; left: clamp(20px, 5vw, 60px); right: clamp(20px, 5vw, 60px); bottom: 72px; display: flex; align-items: center; gap: 18px; opacity: 0; font-size: .74rem; letter-spacing: .18em; color: rgba(244,239,233,.45); }
.al-pre-carga .al-pre-num { font-family: var(--display); font-weight: 500; font-size: .95rem; letter-spacing: 0; color: var(--hueso); min-width: 2.2em; font-variant-numeric: tabular-nums; }
.al-pre-carga i { flex: 1; height: 1px; background: rgba(244,239,233,.14); position: relative; overflow: hidden; }
.al-pre-carga b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--violeta), var(--magenta), var(--rojo)); transform: scaleX(0); transform-origin: left; }
.al-pre-saltar { bottom: 26px; }

/* ---------- Portadas ---------- */
.al-portada { background: var(--tinta) !important; align-items: stretch; flex-direction: column; justify-content: flex-end; }
.al-portada::before { display: none; }
.al-portada::after { background: radial-gradient(60% 55% at 74% 46%, rgba(126,23,190,.16), transparent 70%), linear-gradient(180deg, rgba(11,7,16,0) 55%, rgba(11,7,16,.6) 100%); }
.al-portada canvas.al-particulas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.al-portada .al-ancho { z-index: 3; }
.al-portada-grid { padding-top: 140px; padding-bottom: 36px !important; }
.al-portada-texto { max-width: min(46rem, 50%); }
.al-portada h1 { font-size: clamp(2.6rem, 1.2rem + 3.7vw, 5.3rem); line-height: 1; letter-spacing: -0.04em; max-width: 12ch; color: var(--hueso); }
.al-portada--interna h1 { font-size: clamp(2.6rem, 1.3rem + 3.8vw, 5.4rem); max-width: 13ch; }
.al-portada-bajada, .al-portada-pie > p, .al-portada-pie > div > p { color: rgba(244,239,233,.7) !important; font-size: 1.08rem !important; line-height: 1.75 !important; max-width: 34rem; margin: 30px 0 34px !important; }
.al-portada-pie { display: block; margin-top: 0; max-width: min(40rem, 50%); }
.al-portada .al-acciones { gap: 22px; align-items: center; }
.al-portada-datos { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0 auto; padding-top: 22px; padding-bottom: 34px; border-top: 0; font-size: .82rem; color: rgba(244,239,233,.5); }
.al-portada-datos span { border-top: 1px solid var(--linea-o); padding-top: 16px; }
.al-portada-datos strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.5rem; color: var(--hueso); letter-spacing: -0.02em; margin-bottom: 4px; }
.al-portada--interna { min-height: 88vh; }
.al-portada--interna .al-ancho { padding-bottom: clamp(56px, 7vw, 96px) !important; }
.al-portada--corta { min-height: 64vh; }
.al-portada--corta .al-ancho { max-width: 1320px; }
.al-portada--corta .al-portada-pie, .al-portada--corta .al-portada-texto { max-width: 44rem; }
.al-portada--centro { justify-content: center; }
.al-portada--centro h1 { max-width: 16ch; }
.al-portada--centro .al-ancho > * { max-width: 46rem; }
.al-portada .al-migas a { color: var(--hueso); }
.al-portada .al-migas { font-size: .82rem; letter-spacing: .04em; }
.al-scroll-hint { z-index: 4; bottom: 18px; background: rgba(244,239,233,.14); }
.al-puntos { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(244,239,233,.12) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); }
.al-numero-xl { -webkit-text-stroke: 1px rgba(244,239,233,.3); font-weight: 500; }
.al-unete-grid .al-impact-box { background: rgba(244,239,233,.04); border-color: var(--linea-o); }
.al-unete-grid { position: relative; z-index: 3; }

/* Protagonista: rótulo junto a la figura */
.al-protagonista { position: absolute; z-index: 3; left: 54%; top: 74vh; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 4px; align-items: baseline; max-width: 34%; pointer-events: none; }
.al-protagonista-num { grid-row: 1 / span 2; font-size: .72rem; letter-spacing: .14em; color: rgba(244,239,233,.4); font-variant-numeric: tabular-nums; }
.al-protagonista-n { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); color: var(--hueso); line-height: 1; }
.al-protagonista-r { grid-column: 2; font-size: .92rem; color: rgba(244,239,233,.62); line-height: 1.5; }
.al-protagonista-lab { grid-column: 2; margin-top: 8px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(207,168,239,.7); }
@media (max-width: 991px) {
  .al-portada-texto, .al-portada-pie { max-width: none; }
  .al-portada-grid { padding-top: 0; }
  .al-portada { min-height: 100svh; }
  .al-portada .al-ancho.al-portada-grid { padding-top: 46svh; }
  .al-portada--interna .al-ancho { padding-top: 44svh !important; }
  .al-portada--corta .al-ancho, .al-portada--centro .al-ancho { padding-top: 140px !important; }
  .al-protagonista { max-width: 84%; }
  .al-protagonista-r, .al-protagonista-lab { display: none; }
  .al-portada-datos { display: none; }
  .al-portada h1 { font-size: clamp(2.3rem, 1.5rem + 4vw, 3.4rem); }
  .al-portada-bajada, .al-portada-pie > p { font-size: 1rem !important; margin: 20px 0 26px !important; }
}

/* ---------- Huecos de foto (versión v6) ---------- */
.al-hueco { background: var(--hueso-2) !important; border-radius: var(--radio); isolation: isolate; }
.al-hueco::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 1; animation: none; background-image: repeating-linear-gradient(135deg, rgba(27,22,32,.035) 0 1px, transparent 1px 14px); }
.al-hueco::after { display: none; }
.al-hueco-esq { position: absolute; inset: 14px; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--texto-3), var(--texto-3)) top left / 14px 1px no-repeat, linear-gradient(var(--texto-3), var(--texto-3)) top left / 1px 14px no-repeat,
  linear-gradient(var(--texto-3), var(--texto-3)) top right / 14px 1px no-repeat, linear-gradient(var(--texto-3), var(--texto-3)) top right / 1px 14px no-repeat,
  linear-gradient(var(--texto-3), var(--texto-3)) bottom left / 14px 1px no-repeat, linear-gradient(var(--texto-3), var(--texto-3)) bottom left / 1px 14px no-repeat,
  linear-gradient(var(--texto-3), var(--texto-3)) bottom right / 14px 1px no-repeat, linear-gradient(var(--texto-3), var(--texto-3)) bottom right / 1px 14px no-repeat; opacity: .6; }
.al-hueco-animal { position: absolute; z-index: 1; left: 50%; top: 46%; width: 46%; max-width: 280px; aspect-ratio: 400 / 260; transform: translate(-50%, -50%); color: rgba(27,22,32,.1); fill: currentColor; transition: transform 1s cubic-bezier(.2,.8,.2,1), color .6s ease; }
.al-hueco-animal--golondrina { width: 42%; max-width: 240px; aspect-ratio: 400 / 260; }
a:hover .al-hueco-animal, .al-producto:hover .al-hueco-animal { transform: translate(-46%, -50%); color: rgba(126,23,190,.22); }
.al-hueco .al-hueco-texto { z-index: 2; left: 26px; right: 26px; bottom: 22px; font-size: .78rem; color: var(--texto-3); }
.al-hueco .al-hueco-texto b { font-size: .64rem; letter-spacing: .18em; color: var(--texto-2); margin-bottom: 4px; font-weight: 500; }
.al-hueco--oscuro, .al-oscura .al-hueco { background: var(--tinta-3) !important; }
.al-hueco--oscuro::before, .al-oscura .al-hueco::before { background-image: repeating-linear-gradient(135deg, rgba(244,239,233,.03) 0 1px, transparent 1px 14px); }
.al-hueco--oscuro .al-hueco-animal, .al-oscura .al-hueco-animal { color: rgba(244,239,233,.08); }
.al-hueco--oscuro .al-hueco-texto, .al-oscura .al-hueco .al-hueco-texto { color: rgba(244,239,233,.45); }
.al-hueco--oscuro .al-hueco-texto b, .al-oscura .al-hueco .al-hueco-texto b { color: rgba(244,239,233,.7); }
.al-hueco--oscuro .al-hueco-esq, .al-oscura .al-hueco-esq { filter: invert(1); opacity: .35; }
.al-hueco .al-hueco-golo { display: none; }

/* ---------- Manifiesto ---------- */
.al-manif { padding-bottom: calc(var(--al-sec) * .8); }
.al-manifiesto-frase { font-family: var(--display) !important; font-weight: 400; font-size: clamp(1.7rem, 1rem + 2.4vw, 3.3rem) !important; line-height: 1.22 !important; letter-spacing: -0.025em; color: var(--texto) !important; max-width: 25ch; margin: 0 0 clamp(64px, 8vw, 120px); }
.al-manif .al-pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: 0; border-top: 0; }
.al-manif .al-pilar { display: block; padding: 28px 0 0; border-bottom: 0; border-top: 1px solid var(--linea); }
.al-manif .al-pilar span { display: block; margin-bottom: 22px; font-family: var(--texto-f); font-weight: 500; font-size: .74rem; letter-spacing: .18em; background: none; color: var(--texto-3); -webkit-text-fill-color: currentColor; }
.al-manif .al-pilar h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; margin: 0 0 10px; }
@media (max-width: 767px) { .al-manif .al-pilares { grid-template-columns: 1fr; } }

/* ---------- Marquesina itálica ---------- */
.al-marquesina { display: none; }

/* ---------- Alguien, no algo ---------- */
.al-alguien-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); }
.al-alguien-escena { position: sticky; top: 16vh; height: 68vh; border-radius: 24px; background: var(--papel); overflow: hidden; }
.al-alguien-escena::before { content: ""; position: absolute; left: 10%; right: 10%; top: 72%; height: 1px; background: var(--linea); }
.al-alguien-animal { position: absolute; left: 50%; top: 44%; width: 74%; aspect-ratio: 400 / 260; transform: translate(-40%, -50%); opacity: 0; color: var(--tinta); fill: currentColor; transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.al-alguien-animal.al-activo { opacity: 1; transform: translate(-50%, -50%); }
.al-alguien-contador { position: absolute; left: 28px; bottom: 24px; font-size: .78rem; letter-spacing: .14em; color: var(--texto-3); }
.al-alguien-contador b { font-family: var(--display); font-weight: 500; color: var(--texto); font-size: 1.1rem; letter-spacing: 0; }
.al-alguien-lista { list-style: none; margin: 0; padding: 0; }
.al-ind { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; opacity: .28; transition: opacity .6s ease; }
.al-ind.al-activo { opacity: 1; }
.al-ind-animal { display: none; }
.al-ind-termino { position: relative; display: inline-block; align-self: flex-start; margin: 0 0 18px; font-size: 1.05rem; color: var(--texto-3); }
.al-ind-termino::after { content: ""; position: absolute; left: -4px; right: -4px; top: 54%; height: 2px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.7,0,.2,1) .2s; }
.al-ind.al-visto .al-ind-termino::after { transform: scaleX(1); }
.al-ind h3 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.035em; margin: 0 0 20px; }
.al-ind > p:not(.al-ind-termino) { font-size: 1.08rem; max-width: 30rem; }
.al-ind-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--violeta); font-weight: 500; font-size: .95rem; text-decoration: none; }
.al-ind-link .al-icono { width: 18px; height: 18px; transition: transform .4s ease; }
.al-ind-link:hover .al-icono { transform: translateX(4px); }
@media (max-width: 991px) {
  .al-alguien-grid { grid-template-columns: 1fr; }
  .al-alguien-escena { display: none; }
  .al-ind { min-height: 0; opacity: 1; padding: 44px 0; border-top: 1px solid var(--linea); }
  .al-ind-animal { display: block; width: 150px; aspect-ratio: 400 / 260; color: var(--tinta); fill: currentColor; margin-bottom: 22px; }
}

/* Íconos */
.al-icono { width: 24px; height: 24px; flex: none; }

/* ---------- Teoría de cambio ---------- */
.al-ciclo { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.al-ciclo-linea { position: absolute; left: 28px; right: 0; top: 28px; width: calc(100% - 28px); height: 2px; overflow: visible; }
.al-ciclo-linea path { fill: none; stroke: var(--violeta); stroke-width: 2; vector-effect: non-scaling-stroke; }
.al-ciclo::before { content: ""; position: absolute; left: 28px; right: 0; top: 28px; height: 1px; background: var(--linea); }
.al-etapa { position: relative; z-index: 1; }
.al-etapa-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--papel); border: 1px solid var(--linea); color: var(--texto-2); margin-bottom: 30px; transition: background-color .5s ease, color .5s ease, border-color .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.al-etapa.al-activa .al-etapa-icono { background: var(--violeta); border-color: var(--violeta); color: #fff; transform: scale(1.06); }
.al-etapa-num { display: block; font-size: .72rem; letter-spacing: .18em; color: var(--texto-3); margin-bottom: 8px; }
.al-etapa h3 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; letter-spacing: -0.02em; margin: 0 0 12px; }
.al-etapa p { font-size: .98rem; margin-bottom: 18px; }
.al-etapa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.al-etapa li { padding: 6px 12px; border-radius: 30px; background: var(--hueso); font-size: .8rem; color: var(--texto); }
@media (max-width: 991px) {
  .al-ciclo { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .al-ciclo::before, .al-ciclo-linea { display: none; }
}
@media (max-width: 560px) { .al-ciclo { grid-template-columns: 1fr; } }

/* ---------- Choose Cruelty ---------- */
.al-cc { background: var(--tinta) !important; }
.al-cc::before { background: radial-gradient(50% 50% at 85% 10%, rgba(233,59,36,.12), transparent 70%); }
.al-cc-titulo { font-size: clamp(3rem, 1.3rem + 6.2vw, 8.4rem); line-height: .92; letter-spacing: -0.05em; color: var(--hueso); }
.al-cc-titulo .al-cc-tachar::after { height: .06em; }
.al-cc-punto { color: var(--rojo); }
.al-cc-cambio { margin-top: .05em; font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(3rem, 1.3rem + 6.2vw, 8.4rem) !important; line-height: .95 !important; letter-spacing: -0.02em !important; background: none !important; -webkit-text-fill-color: var(--lila); color: var(--lila); }
.al-cc-cambio em { font-style: italic; }
.al-cc-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 100px); }
.al-cc-video { border-radius: var(--radio); }
.al-cc-lead { font-family: var(--display) !important; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem) !important; line-height: 1.15 !important; letter-spacing: -0.02em; color: var(--hueso) !important; margin: 0 0 18px !important; }
.al-cc-texto > p { font-size: 1rem; }
.al-cc-procesos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 26px 0 0; }
.al-cc-procesos li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border: 0; border-bottom: 1px solid var(--linea-o); border-radius: 0; font-size: .95rem; color: var(--hueso); }
.al-cc-procesos li span { font-size: .7rem; letter-spacing: .14em; color: rgba(244,239,233,.4); }
.al-cc-procesos li:hover { background: none; color: var(--rojo); }
.al-cc-eslogan { font-family: var(--display) !important; font-weight: 500 !important; font-size: 1.4rem !important; color: var(--hueso) !important; margin-top: 28px !important; }
.al-cc-eslogan em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lila); background: none; -webkit-text-fill-color: currentColor; }
.al-premio { gap: 16px; padding: 18px 20px; border-color: var(--linea-o); background: rgba(244,239,233,.03); }
.al-premio .al-icono { width: 34px; height: 34px; color: var(--lila); }
.al-premio strong { color: var(--hueso); }
.al-creditos { grid-template-columns: 1fr 1fr; margin: 24px 0 0; border-top-color: var(--linea-o); }
.al-creditos dt { color: var(--hueso); font-weight: 500; font-size: .85rem; }
.al-creditos dd { margin: 2px 0 0; color: rgba(244,239,233,.55); font-size: .9rem; }
.al-cc-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: rgba(244,239,233,.08); border-color: rgba(244,239,233,.25); }
@media (max-width: 991px) { .al-cc-grid { grid-template-columns: 1fr; } }

/* ---------- Recorrido de proyectos ---------- */
.al-recorrido { background: var(--papel); }
.al-pista { gap: 24px; padding-top: 30px; padding-bottom: 80px; }
.al-proyecto { width: clamp(270px, 24vw, 350px); }
.al-proyecto-foto { aspect-ratio: 4 / 5; border-radius: var(--radio); background: var(--hueso-2); }
.al-proyecto-foto::after { display: none; }
.al-proyecto-foto .al-hueco { border-radius: 0; }
.al-proyecto-meta { padding-top: 20px; }
.al-proyecto .al-tipo { margin: 0 0 8px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.al-proyecto h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--texto); }
.al-proyecto p { font-size: .95rem; margin: 0; color: var(--texto-2); }
.al-avance { background: var(--linea); }

/* ---------- Cifras ---------- */
.al-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border: 0; }
.al-cifra { container-type: inline-size; background: var(--papel); border: 0; border-radius: var(--radio); padding: clamp(24px, 2.4vw, 36px); min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; overflow: hidden; }
.al-cifra:hover { background: #fff; }
.al-cifra-num { font-family: var(--display); font-weight: 500; font-size: min(3.6rem, 17cqi); letter-spacing: -0.04em; line-height: 1; color: var(--texto); margin: 0; white-space: nowrap; }
.al-cifra:hover .al-cifra-num { background: none; -webkit-text-fill-color: currentColor; color: var(--violeta); }
.al-cifra-txt { color: var(--texto-2); font-size: .92rem; line-height: 1.45; margin: 0; }
@media (max-width: 991px) { .al-cifras { grid-template-columns: 1fr 1fr; gap: 10px; } .al-cifra { min-height: 150px; } }

/* ---------- 16 años ---------- */
.al-anos { background: var(--tinta) !important; }
.al-anos-escena { min-height: 100vh; justify-content: center; padding-block: 120px 60px; }
.al-anos-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.al-anos-frase { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); color: var(--hueso); }
.al-anos-frase em { color: var(--lila); }
.al-anos-ano { font-size: clamp(5.5rem, 2rem + 14vw, 15rem); line-height: .85; letter-spacing: -0.055em; margin: 28px 0 0; background: none; -webkit-text-fill-color: var(--hueso); color: var(--hueso); }
.al-anos-linea { margin: 40px 0 28px; background: var(--linea-o); height: 1px; }
.al-anos-linea span { background: linear-gradient(90deg, var(--violeta), var(--magenta), var(--rojo)); }
.al-anos-hito b { font-family: var(--display); font-weight: 500; }
.al-anos-hito span { color: rgba(244,239,233,.6); font-size: .9rem; }

/* ---------- Hoja de ruta 2042 ---------- */
.al-ruta { background: var(--tinta) !important; border-top: 1px solid var(--linea-o); }
.al-ruta-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; min-height: 340px; padding: clamp(32px, 4vw, 56px); border-radius: 24px; background: var(--tinta-2); border: 1px solid var(--linea-o); position: relative; overflow: hidden; }
.al-ruta-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 0% 100%, rgba(126,23,190,.18), transparent 70%); pointer-events: none; }
.al-ruta-num { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(5rem, 2.4rem + 9vw, 11rem); line-height: .9; color: var(--lila); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; position: relative; }
.al-ruta-fases { position: relative; }
.al-fase { display: none; }
.al-fase.al-activa { display: block; }
.al-fase em { font-style: normal; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lila); }
.al-fase h3 { font-family: var(--display); font-weight: 500; color: var(--hueso); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.025em; margin: 14px 0 16px; }
.al-fase p { margin: 0; max-width: 30rem; }
.al-ruta-control { margin-top: 36px; }
.al-ruta-rango { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 0%; }
.al-ruta-rango::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--violeta), var(--magenta) calc(var(--p) * .7), var(--rojo) var(--p), rgba(244,239,233,.16) var(--p)); }
.al-ruta-rango::-moz-range-track { height: 2px; background: rgba(244,239,233,.16); }
.al-ruta-rango::-moz-range-progress { height: 2px; background: var(--magenta); }
.al-ruta-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--hueso); border: 5px solid var(--violeta); box-shadow: 0 0 0 6px rgba(126,23,190,.2); }
.al-ruta-rango::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--hueso); border: 5px solid var(--violeta); }
.al-ruta-rango:focus-visible { outline: 2px solid var(--lila); outline-offset: 6px; border-radius: 4px; }
.al-ruta-marcas { display: flex; justify-content: space-between; margin-top: 10px; }
.al-ruta-marcas button { background: none; border: 0; padding: 4px 0; font: 500 .82rem var(--texto-f); letter-spacing: .08em; color: rgba(244,239,233,.38); cursor: pointer; transition: color .3s ease; }
.al-ruta-marcas button.al-activa { color: var(--hueso); }
.al-carta { max-width: 52rem; margin: clamp(90px, 11vw, 160px) auto 0; text-align: center; }
.al-carta .al-kicker { justify-content: center; }
.al-carta blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 1rem + 1.5vw, 2.35rem); line-height: 1.38; color: var(--hueso); }
.al-carta figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; font-size: .9rem; letter-spacing: .06em; color: rgba(244,239,233,.55); }
.al-carta-golo { width: 24px; height: 18px; fill: var(--lila); }
@media (max-width: 991px) { .al-ruta-panel { grid-template-columns: 1fr; gap: 12px; } .al-ruta-marcas button { font-size: .72rem; } }

/* ---------- Por qué Animal Libre ---------- */
.al-razones { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea); }
.al-razon { padding: clamp(32px, 3.4vw, 52px) clamp(20px, 3vw, 48px) clamp(32px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--linea); }
.al-razon:nth-child(even) { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid var(--linea); padding-right: 0; }
.al-razon-num { display: block; font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--violeta); margin-bottom: 16px; }
.al-razon h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; margin: 0 0 12px; }
.al-razon p { margin: 0; max-width: 32rem; }
.al-razon sup { color: var(--violeta); }
.al-alianza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 3.4vw, 48px); border-radius: 24px; background: var(--tinta); color: var(--hueso); }
.al-alianza h3 { color: var(--hueso); font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem); letter-spacing: -0.02em; margin: 0 0 8px; }
.al-alianza p { margin: 0; color: rgba(244,239,233,.65); }
.al-alianza-icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(207,168,239,.12); color: var(--lila); }
.al-alianza-icono .al-icono { width: 30px; height: 30px; }
@media (max-width: 991px) { .al-razones { grid-template-columns: 1fr; } .al-razon, .al-razon:nth-child(even) { padding: 32px 0; border-left: 0; } .al-alianza { grid-template-columns: 1fr; } }

/* ---------- Tienda ---------- */
.al-tienda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-producto .al-hueco { aspect-ratio: 1 / 1; margin-bottom: 18px; }
.al-producto h3 { font-family: var(--display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; }
.al-producto p { font-size: .95rem; }
.al-producto--cta { background: var(--tinta); border-radius: var(--radio); }
.al-producto--cta::before { background: radial-gradient(70% 70% at 90% 0%, rgba(126,23,190,.35), transparent 70%); }
.al-producto--cta h3 { font-size: 1.8rem; color: var(--hueso); }
@media (max-width: 991px) { .al-tienda { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .al-tienda { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.al-cierre { position: relative; background: var(--tinta); color: rgba(244,239,233,.66); overflow: hidden; }
.al-cierre a { color: inherit; text-decoration: none; transition: color .3s ease; }
.al-cierre a:hover { color: var(--hueso); }
.al-cierre-cta { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 110px); align-items: end; padding-top: clamp(100px, 12vw, 170px); padding-bottom: clamp(56px, 6vw, 88px); }
.al-cierre h2 { font-size: clamp(2.8rem, 1.4rem + 5vw, 6.8rem); line-height: .98; letter-spacing: -0.045em; color: var(--hueso); margin: 0; }
.al-cierre-cta-texto p { color: rgba(244,239,233,.68); font-size: 1.08rem; margin: 0 0 30px; max-width: 30rem; }
.al-cierre .al-acciones { gap: 22px; align-items: center; }
.al-desfile { position: relative; height: 64px; overflow: hidden; margin-bottom: clamp(30px, 4vw, 56px); }
.al-desfile-pista { position: absolute; left: 0; bottom: 8px; display: flex; gap: 11vw; width: max-content; animation: al-desfile 90s linear infinite; }
.al-desfile-animal { width: 70px; height: 46px; fill: rgba(244,239,233,.5); color: rgba(244,239,233,.5); animation: al-paso 1.2s ease-in-out infinite alternate; }
.al-desfile-animal:nth-child(3n) { animation-delay: -.4s; fill: rgba(207,168,239,.6); color: rgba(207,168,239,.6); }
.al-desfile-animal:nth-child(4n) { animation-delay: -.8s; }
.al-desfile-suelo { position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--linea-o); }
@keyframes al-desfile { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes al-paso { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.al-cierre-grilla { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding: 0 0 clamp(48px, 5vw, 72px); }
.al-cierre-grilla h3 { color: var(--hueso); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; margin: 0 0 20px; font-family: var(--texto-f); }
.al-cierre-h3-2 { margin-top: 32px !important; }
.al-cierre-grilla ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: .98rem; }
.al-cierre-redes { grid-template-columns: 1fr 1fr; }
.al-cierre-logo img { height: 40px; width: auto; margin-bottom: 22px; }
.al-cierre-marca p { color: rgba(244,239,233,.6); max-width: 30ch; font-size: .98rem; }
.al-cierre-paises { display: flex; gap: 8px; margin-top: 18px; }
.al-cierre-paises span { padding: 6px 13px; border: 1px solid var(--linea-o); border-radius: 30px; font-size: .8rem; }
.al-cierre-base { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; padding: 26px 0 36px; border-top: 1px solid var(--linea-o); font-size: .86rem; }
.al-cierre-base ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.al-cierre-base em { font-size: 1.05em; }
.al-cierre .al-idiomas { background: rgba(244,239,233,.08); }
.al-cierre .al-idiomas a { color: rgba(244,239,233,.65); }
.al-cierre .al-idiomas a[aria-current="true"] { background: var(--hueso); color: var(--tinta); }
@media (max-width: 991px) { .al-cierre-cta { grid-template-columns: 1fr; } .al-cierre-grilla { grid-template-columns: 1fr 1fr; } .al-cierre-marca { grid-column: 1 / -1; } }
@media (max-width: 560px) { .al-cierre-base { flex-direction: column; align-items: flex-start; } }

/* ---------- Menú ---------- */
.mil-menu-frame { background: var(--tinta); }
.al-menu-cuerpo { height: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 100px); align-items: center; padding-top: 110px; padding-bottom: 60px; pointer-events: none; }
.mil-menu-frame.mil-active .al-menu-cuerpo { pointer-events: all; }
.al-menu-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.al-menu-nav li { counter-increment: m; overflow: hidden; border-bottom: 1px solid var(--linea-o); }
.al-menu-nav a { display: flex; align-items: baseline; gap: 22px; padding: 12px 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.2rem); letter-spacing: -0.03em; color: var(--hueso); text-decoration: none; transition: color .3s ease, padding .5s cubic-bezier(.2,.8,.2,1); }
.al-menu-nav a::before { content: counter(m, decimal-leading-zero); font-family: var(--texto-f); font-size: .72rem; letter-spacing: .14em; color: rgba(244,239,233,.35); }
.al-menu-nav a:hover { color: var(--lila); padding-left: 10px; }
.al-menu-nav .mil-active a { font-family: var(--serif); font-style: italic; color: var(--lila); }
.al-menu-lado { display: grid; gap: 24px; justify-items: start; }
.al-menu-animales { display: flex; gap: 18px; align-items: flex-end; }
.al-menu-animal { width: 54px; height: 36px; fill: rgba(244,239,233,.5); color: rgba(244,239,233,.5); }
.al-menu-frase { margin: 0; font-size: 1.15rem; line-height: 1.6; color: rgba(244,239,233,.7); max-width: 26rem; }
.al-menu-pie { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.al-menu-pie .al-redes a { color: rgba(244,239,233,.7); border-color: var(--linea-o); }
@media (max-width: 991px) { .al-menu-cuerpo { grid-template-columns: 1fr; align-content: start; padding-top: 120px; overflow-y: auto; height: 100%; } .al-menu-animales { display: none; } }

/* ---------- Donaciones ---------- */
.al-dona { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; }
.al-dona[hidden] { display: none; }
.al-dona-fondo { position: absolute; inset: 0; background: rgba(11,7,16,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.al-dona-panel { position: relative; width: min(940px, 100%); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 26px; background: var(--papel); box-shadow: 0 40px 120px rgba(0,0,0,.45); }
.al-dona-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: var(--papel); color: var(--texto); cursor: pointer; transition: transform .4s ease; }
.al-dona-x:hover { transform: rotate(90deg); }
.al-dona-arte { position: relative; background: var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px; overflow: hidden; }
.al-dona-arte::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(126,23,190,.4), transparent 70%), radial-gradient(50% 40% at 70% 90%, rgba(233,59,36,.25), transparent 70%); }
.al-dona-golo { position: relative; width: 160px; height: 120px; fill: url(#al-grad-marca); color: var(--lila); }
.al-dona-arte p { position: relative; margin: 0; display: flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .18em; color: rgba(244,239,233,.6); }
.al-dona-arte p i { width: 60px; height: 1px; background: linear-gradient(90deg, var(--violeta), var(--rojo)); }
.al-dona-cuerpo { padding: clamp(32px, 4vw, 52px); }
.al-dona-cuerpo h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 40px 12px 0; color: var(--texto); }
.al-dona-bajada { font-size: .98rem; margin: 0 0 24px; }
.al-dona-frecuencia { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 40px; background: var(--hueso); margin-bottom: 18px; }
.al-dona-frecuencia button { position: relative; z-index: 1; height: 42px; border: 0; background: none; border-radius: 40px; font: 500 .9rem var(--texto-f); color: var(--texto-2); cursor: pointer; transition: color .3s ease; }
.al-dona-frecuencia button[aria-checked="true"] { color: #fff; }
.al-dona-pildora { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 40px; background: var(--tinta); transition: transform .5s cubic-bezier(.7,0,.2,1); }
.al-dona-frecuencia[data-activa="unica"] .al-dona-pildora { transform: translateX(100%); }
.al-dona-pais { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: .85rem; color: var(--texto-2); }
.al-dona-pais select, .al-dona-otro input { height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linea); background: #fff; font: 400 .95rem var(--texto-f); color: var(--texto); }
.al-dona-montos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.al-dona-montos button { position: relative; height: 62px; border-radius: 14px; border: 1px solid var(--linea); background: #fff; font: 500 1rem var(--display); letter-spacing: -0.01em; color: var(--texto); cursor: pointer; transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
.al-dona-montos button small { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 20px; background: var(--violeta); color: #fff; font: 500 .62rem var(--texto-f); letter-spacing: .08em; white-space: nowrap; }
.al-dona-montos button[aria-checked="true"] { border-color: var(--violeta); background: rgba(126,23,190,.06); color: var(--violeta); box-shadow: inset 0 0 0 1px var(--violeta); }
.al-dona-otro { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--texto-2); }
.al-dona-otro input { width: 50%; }
.al-dona-impacto { min-height: 3.2em; margin: 18px 0 20px; padding: 14px 16px; border-radius: 12px; background: var(--hueso); font-size: .92rem; line-height: 1.5; color: var(--texto); }
.al-dona-ir { width: 100%; justify-content: center; }
.al-dona-pie { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .78rem; line-height: 1.5; color: var(--texto-3); }
.al-dona-pie .al-icono { width: 16px; height: 16px; margin-top: 2px; }
@media (max-width: 760px) {
  .al-dona { padding: 0; align-items: end; }
  .al-dona-panel { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; max-height: 92vh; }
  .al-dona-arte { display: none; }
}
.al-dona-flotante { position: fixed; z-index: 30; right: 108px; bottom: 30px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px 0 18px; border: 0; border-radius: 40px; background: var(--violeta); color: #fff; font: 500 .9rem var(--texto-f); letter-spacing: .04em; cursor: pointer; box-shadow: 0 14px 34px rgba(126,23,190,.35); transform: translateY(140%); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease, background-color .3s ease; }
.al-dona-flotante.al-visible { transform: none; opacity: 1; }
.al-dona-flotante:hover { background: var(--magenta); }
.al-dona-flotante .al-icono { width: 18px; height: 18px; }
@media (max-width: 1200px) { .al-dona-flotante { right: 16px; bottom: 16px; } }

/* ---------- Páginas internas ---------- */
.al-bloque { background: var(--papel); border-bottom: 1px solid var(--linea); }
.al-bloque-visual .al-descubre { border-radius: var(--radio); background: var(--hueso-2); }
.al-bloque-num { position: static; display: block; margin-bottom: 18px; font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--violeta); -webkit-text-stroke: 0; }
.al-bloque-num i { font-style: normal; color: var(--texto-3); }
.al-bloque-texto .al-titulo-l em { display: block; font-size: .78em; margin-top: .12em; }
.al-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.al-etiqueta-p { padding: 6px 13px; border-radius: 30px; background: var(--hueso); font-size: .76rem; letter-spacing: .04em; color: var(--texto); }
.al-bloque-h4 { font-weight: 500; font-size: 1.25rem; }
.al-indice { background: rgba(251,249,246,.9); }
.al-indice .al-quick-nav__item { border-radius: 30px; }
.al-jaulas-titulo em { font-family: var(--serif); font-weight: 400; }
.al-areas { border-top-color: var(--linea); }
.al-area { border-right-color: var(--linea); }
.al-area span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.6rem; -webkit-text-stroke: 0; color: var(--violeta); }
.al-area h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
.al-mv-item .al-texto-grande { font-family: var(--display) !important; font-weight: 400 !important; color: var(--texto); }
.al-texto-grande--claro { color: var(--hueso) !important; }
.al-hito .al-ano { font-family: var(--display); font-weight: 500; background: none; -webkit-text-fill-color: var(--violeta); color: var(--violeta); }
.al-ano--hueco { -webkit-text-fill-color: transparent !important; }
.al-foto--2042 { border-radius: var(--radio); background: var(--tinta); }
.al-foto--2042 span { font-family: var(--serif); font-style: italic; font-weight: 400; background: none; -webkit-text-fill-color: var(--lila); color: var(--lila); }
.al-equipo { gap: 14px; }
.al-persona { border-radius: var(--radio); border: 0; background: var(--papel); }
.al-persona-foto { position: relative; aspect-ratio: 1; background: var(--hueso-2); background-image: repeating-linear-gradient(135deg, rgba(27,22,32,.035) 0 1px, transparent 1px 14px); display: grid; place-items: center; }
.al-persona .al-monograma { position: static; aspect-ratio: auto; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); color: var(--texto-3); }
.al-persona:hover .al-monograma { color: var(--violeta); }
.al-persona-info h3 { font-family: var(--display); font-weight: 500; }
.al-pais-fila h3 { font-family: var(--display); font-weight: 500; }
.al-pais-fila:hover h3 { background: none; -webkit-text-fill-color: var(--lila); font-family: var(--serif); font-style: italic; font-weight: 400; }
.al-paises-grandes, .al-pais-fila { border-color: var(--linea-o); }
.al-forma { background: var(--papel); border-color: var(--linea); border-radius: var(--radio); }
.al-forma h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
.al-forma::after { background: var(--violeta); }
.al-nota h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
.al-contacto h2 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; }
.al-contactos, .al-contacto { border-color: var(--linea); }
.al-impact-box h2 { font-family: var(--display); font-weight: 500; }

/* ---------- Sistema ---------- */
.al-sis { display: grid; gap: clamp(64px, 8vw, 120px); }
.al-sis-colores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.al-sis-colores div { border-radius: var(--radio); padding: 120px 18px 18px; background: var(--c); color: #fff; display: grid; gap: 2px; }
.al-sis-colores .al-claro-c { color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea); }
.al-sis-colores code { font-size: .78rem; opacity: .8; }
.al-sis-colores small { font-size: .74rem; opacity: .75; line-height: 1.4; }
.al-sis-tipos { display: grid; gap: 34px; }
.al-sis-tipos small { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px; }
.al-sis-tipos p { margin: 0; }
.al-sis-regla { margin-top: 28px; padding: 16px 20px; border-left: 2px solid var(--violeta); background: var(--hueso); font-size: .95rem; color: var(--texto); }
.al-sis-animales { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.al-sis-animal { width: 100%; aspect-ratio: 400 / 260; padding: 18px; border-radius: var(--radio); background: var(--hueso); fill: var(--tinta); color: var(--tinta); }
.al-sis-animal--golondrina { aspect-ratio: 400 / 260; }
.al-sis-iconos { display: flex; flex-wrap: wrap; gap: 14px; }
.al-sis-iconos .al-icono { width: 56px; height: 56px; padding: 14px; border-radius: 14px; background: var(--hueso); color: var(--texto); }
.al-sis-comp { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 28px; }
.al-sis-huecos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.al-sis-huecos .al-hueco { aspect-ratio: 16 / 9; }
@media (max-width: 991px) { .al-sis-colores, .al-sis-animales { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Seguridad de layout: nada se sale de su bloque */
.al-sec, .al-cierre, .al-portada { overflow-x: clip; }
h1, h2, h3, p { overflow-wrap: break-word; }
.al-unete-grid--uno { grid-template-columns: minmax(0, 1fr); max-width: min(44rem, 50%); } @media (max-width: 991px) { .al-unete-grid--uno { max-width: none; } }
#aporte .al-area h3 { font-size: 1.35rem; line-height: 1.3; }