/* ==========================================================================
   Animal Libre — capa v8
   Pictogramas vivos, animales en puntos, mar de Bajo las jaulas,
   tienda con pedidos directos, equipo en duotono, cursor sin mezcla.
   ========================================================================== */

/* ---------- Cursor: color de marca, sin modo diferencia ---------- */
.mil-ball { mix-blend-mode: normal !important; background-color: var(--violeta) !important; }
.mil-ball .mil-more-text { color: #fff !important; letter-spacing: .12em; }

/* ---------- Pictogramas vivos ---------- */
.al-picto circle { opacity: .1; }
.al-picto circle.on { fill: var(--violeta); opacity: 0; transform: scale(.2); transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease, fill .4s ease; transition-delay: calc(var(--d) * 38ms); }
.al-picto.al-visto circle.on { opacity: 1; transform: scale(1); animation: al-picto-ola 7s ease-in-out infinite; animation-delay: calc(1.6s + var(--d) * 90ms); }
@keyframes al-picto-ola { 0%, 84%, 100% { transform: scale(1); } 90% { transform: scale(1.38); } }
.al-oscura .al-picto circle.on, .al-alianza .al-picto circle.on, .al-premio .al-picto circle.on, .al-aviso-sensible .al-picto circle.on { fill: var(--lila); }
.al-oscura .al-picto circle, .al-alianza .al-picto circle { fill: var(--hueso); }
.al-oscura .al-picto circle.on { fill: var(--lila); }
.al-etapa.al-activa .al-etapa-icono .al-picto circle.on, .al-video-play .al-picto circle.on, .al-tema:hover .al-picto circle.on, .al-tema-carta:hover .al-picto circle.on { fill: #fff; }
.al-etapa .al-etapa-icono .al-picto circle { fill: var(--texto); }
.al-tema:hover .al-picto circle, .al-tema-carta:hover .al-picto circle { fill: #fff; }
a:hover .al-picto.al-visto circle.on { animation: none; transform: scale(1.25); }

/* ---------- Animales en puntos ---------- */
.al-animal-p, .al-desfile-animal, .al-menu-animal { fill: currentColor; overflow: visible; }
.al-animal-p circle, .al-desfile-animal circle, .al-menu-animal circle { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--x) * 700ms); }
.al-visto circle { opacity: 1; }
.al-desfile-animal { width: 74px; height: 50px; color: rgba(244,239,233,.55); fill: currentColor; }
.al-desfile-animal:nth-child(3n) { color: var(--lila); fill: currentColor; }
.al-menu-animal { width: 58px; height: 38px; color: rgba(244,239,233,.55); }
.al-ind-animal { color: var(--tinta); }

/* ---------- El mar de Bajo las jaulas ---------- */
.al-mar { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #12395a 0%, #0a2238 45%, #050f1b 100%); }
.al-proyecto-foto .al-mar, .al-doc-carta-img .al-mar, .al-bloque-visual .al-mar { position: absolute; inset: 0; }
.al-mar-luz { position: absolute; inset: -20% -10% auto; height: 80%; background: repeating-linear-gradient(100deg, rgba(159,211,240,.07) 0 30px, transparent 30px 90px); filter: blur(10px); animation: al-luz 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes al-luz { from { transform: translateX(-4%) skewX(-6deg); } to { transform: translateX(4%) skewX(6deg); } }
.al-mar-salmon { position: absolute; left: 12%; top: 34%; width: 76%; height: auto; color: #b9e2f7; fill: currentColor; animation: al-nado 16s ease-in-out infinite; }
.al-mar-salmon circle { animation: al-ola 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--x) * -1.8s); }
.al-mar-salmon.al-visto circle { opacity: 1; }
.al-mar-salmon--2 { left: 4%; top: 64%; width: 36%; opacity: .32; animation-duration: 22s; animation-direction: reverse; }
@keyframes al-nado { 0% { transform: translate(-8%, 0) rotate(-1deg); } 50% { transform: translate(8%, -6%) rotate(1.5deg); } 100% { transform: translate(-8%, 0) rotate(-1deg); } }
@keyframes al-ola { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
.al-mar--foto img { width: 100%; height: 100%; object-fit: cover; }
.al-mar-sec { position: relative; background: linear-gradient(180deg, #050f1b 0%, #0a2238 100%) !important; color: var(--hueso); overflow: hidden; }
.al-mar-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.al-mar-texto .al-titulo-xl { color: var(--hueso); }
.al-mar-texto .al-titulo-xl em { color: #9fd3f0; }
.al-mar-texto .al-lead { color: rgba(244,239,233,.75); }
.al-mar-texto .al-kicker { color: rgba(244,239,233,.65); }
.al-mar-texto .al-kicker::before { background: #9fd3f0; }
.al-mar-texto .al-pronto { color: #9fd3f0; border-color: rgba(159,211,240,.4); }
.al-mar-figura { margin: 0; }
.al-mar-figura .al-mar { aspect-ratio: 4 / 3; border-radius: 24px; }
.al-mar-figura figcaption { margin-top: 14px; font-family: var(--serif); font-style: italic; color: rgba(244,239,233,.6); }
.al-bloque-visual .al-jaulas-titulo { z-index: 3; }
@media (max-width: 991px) { .al-mar-grid { grid-template-columns: 1fr; } }

/* ---------- Corto de Choose Cruelty ---------- */
.al-cc-video.al-video { aspect-ratio: 16 / 9; }
.al-video-cartel { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; background: radial-gradient(70% 70% at 50% 40%, rgba(233,59,36,.18), transparent 70%), #12090d; font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); letter-spacing: -0.03em; color: var(--hueso); }
.al-video-cartel s { text-decoration-color: var(--rojo); text-decoration-thickness: .08em; opacity: .5; }
.al-video-cartel em { font-family: var(--serif); font-weight: 400; color: var(--lila); }

/* ---------- Equipo en duotono ---------- */
.al-persona-foto img { filter: grayscale(1) contrast(1.05) brightness(1.04); transition: filter .8s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.al-persona-foto::after { content: ""; position: absolute; inset: 0; background: var(--violeta); mix-blend-mode: color; opacity: .42; transition: opacity .8s ease; pointer-events: none; }
.al-persona:hover .al-persona-foto img { filter: none; }
.al-persona:hover .al-persona-foto::after { opacity: 0; }
.al-persona-info h3 { transition: color .4s ease; }
.al-persona:hover .al-persona-info h3 { color: var(--violeta); }

/* ---------- 2042 en Quiénes somos ---------- */
.al-foto--2042 { display: flex; align-items: center; padding: 34px 26px 20px; }
.al-foto--2042 .al-mitad { width: 100%; margin: 0; }

/* ---------- Tienda con pedido directo ---------- */
.al-tienda2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.al-tienda2-intro { position: sticky; top: 130px; }
.al-tienda2-intro p { max-width: 28rem; margin: 22px 0 26px; }
.al-tienda2-pasos { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.al-tienda2-pasos li { display: flex; gap: 14px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--linea); font-size: .95rem; color: var(--texto); }
.al-tienda2-pasos b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--violeta); }
.al-tienda2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.al-prod--grande { grid-column: 1 / -1; }
.al-prod-enlace { display: block; color: var(--texto); text-decoration: none; }
.al-prod-foto { position: relative; border-radius: var(--radio); overflow: hidden; }
.al-prod-foto .al-foto { aspect-ratio: 4 / 5; border-radius: 0; }
.al-prod--grande .al-prod-foto .al-foto { aspect-ratio: 16 / 10; }
.al-prod-financia { position: absolute; left: 14px; bottom: 14px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(251,249,246,.92); backdrop-filter: blur(6px); font-size: .82rem; font-weight: 500; color: var(--texto); transform: translateY(8px); opacity: .9; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.al-prod-financia i { font-style: normal; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--violeta); }
.al-prod-enlace:hover .al-prod-financia { transform: none; opacity: 1; }
.al-prod-texto { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; padding: 16px 4px 0; }
.al-prod-texto h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.al-prod-texto p { grid-column: 1; margin: 0; font-size: .9rem; }
.al-prod-pedir { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--violeta); white-space: nowrap; }
.al-prod-pedir .al-icono { width: 16px; height: 16px; transition: transform .4s ease; }
.al-prod-enlace:hover .al-prod-pedir .al-icono { transform: translateX(4px); }
@media (max-width: 991px) { .al-tienda2 { grid-template-columns: 1fr; } .al-tienda2-intro { position: static; } }
@media (max-width: 560px) { .al-tienda2-grid { grid-template-columns: 1fr; } .al-prod-foto .al-foto { aspect-ratio: 4 / 3; } }
.al-mitad-caja { display: flex; align-items: center; padding: 40px 26px 22px; background: var(--tinta) !important; border-radius: var(--radio); }
.al-mitad-caja .al-mitad { width: 100%; margin: 0; }
.al-mitad-caja .al-mitad-ano.al-on i { opacity: 1; }
.al-tema-carta .al-picto { width: 58px; height: 58px; } .al-tema .al-picto { width: 48px; height: 48px; } .al-cv-sellos .al-picto { width: 44px; height: 44px; }