/* ==========================================================================
   Animal Libre — v16
   ========================================================================== */
.al-aula-fotos { position: absolute; inset: 0; }
.al-aula-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.al-aula-fotos img.al-activa { opacity: 1; transform: none; }

/* ---------- Etiqueta honesta: en la identidad de la marca ---------- */
.al-envase-frente { background: var(--papel) !important; border: 1px solid rgba(27,22,32,.08); box-shadow: 0 30px 60px -40px rgba(27,22,32,.35); color: var(--texto); }
.al-envase-frente b { color: var(--tinta); }
.al-envase-sello { border-color: rgba(126,23,190,.45); color: var(--violeta); }
.al-envase-puntos { position: absolute; left: 8%; right: 8%; top: 16%; height: 46%; width: 84%; pointer-events: none; }
.al-envase-pista { color: var(--violeta); }
.al-envase-frente::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 120px; height: 1px; background: rgba(27,22,32,.1); }
.al-envase-dorso { background: var(--tinta); border: 1px solid rgba(244,239,233,.1); color: rgba(244,239,233,.86); }
.al-envase-dorso h3 { color: #fff; border-bottom-color: rgba(207,168,239,.5); border-bottom-width: 2px; }
.al-envase-dorso h3 em { color: var(--lila); }
.al-et-marca { background: rgba(207,168,239,.14); color: var(--lila); }
.al-et-fila { border-bottom-color: rgba(244,239,233,.1); }
.al-et-fila dt { color: #fff; font-weight: 500; }
.al-et-fila small { color: rgba(244,239,233,.45); }
.al-envase-volver { background: transparent; border-color: rgba(244,239,233,.25); color: var(--hueso); }

/* ---------- Día Nacional contra el Rodeo ---------- */
.al-dia { position: relative; overflow: hidden; background: radial-gradient(80% 90% at 85% 10%, rgba(126,23,190,.45), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(233,59,36,.25), transparent 65%), var(--tinta) !important; grid-template-columns: auto 1fr; }
.al-dia-puntos { position: absolute; right: -4%; top: 0; width: 55%; height: 62%; opacity: .55; pointer-events: none; }
.al-dia > div:last-child { position: relative; z-index: 1; }
.al-dia-fecha { position: relative; z-index: 1; background: none !important; box-shadow: none !important; transform: none !important; width: auto !important; aspect-ratio: auto !important; display: flex !important; flex-direction: column; align-items: flex-start; padding-right: 8px; }
.al-dia-fecha b { font-family: var(--serif) !important; font-style: italic; font-weight: 400 !important; font-size: clamp(6rem, 4rem + 5vw, 9rem) !important; line-height: .8 !important; background: linear-gradient(160deg, #cfa8ef 0%, #e07ad0 50%, #f05c40 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.al-dia-fecha span { margin-top: 10px !important; font-family: var(--texto-f) !important; font-style: normal !important; font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,239,233,.6) !important; }
.al-dia .mil-button { background: var(--hueso) !important; }
.al-dia .mil-button span { color: var(--tinta) !important; }
.al-dia .mil-button svg { background-color: var(--violeta) !important; }
.al-dia .mil-button svg path { fill: #fff !important; }
.al-dia h3 em { color: var(--lila) !important; }
.al-dia .al-kicker::before { background: var(--rojo) !important; }

/* ---------- Galgos: del óvalo a la línea ---------- */
.al-pista2 { position: relative; margin-top: 10px; }
.al-pista2-lienzo { position: relative; width: 100%; aspect-ratio: 1000 / 440; }
.al-pista2-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.al-p2-camino { fill: none; stroke: rgba(244,239,233,.28); stroke-width: 1.4; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.al-p2-hecho { fill: none; stroke: url(#al-grad-marca); stroke: #cfa8ef; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(207,168,239,.5)); }
.al-pista2-galgo { position: absolute; left: 0; top: 0; width: 120px; height: 80px; pointer-events: none; will-change: transform; }
.al-pista2-frase { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; width: min(440px, 46%); text-align: center; font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); line-height: 1.2; letter-spacing: -0.02em; color: #fff; pointer-events: none; }
.al-pista2-frase em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--lila); }
.al-p2-b { opacity: 0; top: 18%; }
.al-pista2-etapas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.al-pista2-etapas .al-etapa-g { position: absolute; left: 0; top: 0; width: 170px; margin: 12px 0 0 -6px; padding-top: 18px; opacity: 1 !important; transition: none; will-change: transform; }
.al-pista2-etapas .al-etapa-g span { display: block; font-size: .8rem; line-height: 1.4; }
@media (max-width: 991px) {
  .al-pista2-lienzo { aspect-ratio: auto; }
  .al-pista2-svg, .al-pista2-galgo, .al-pista2-frase { display: none; }
  .al-pista2-etapas { position: static; display: grid; gap: 18px; }
  .al-pista2-etapas .al-etapa-g { position: relative; width: auto; transform: none !important; margin: 0; }
}

/* ---------- Bajo las jaulas: salmonera en vista aérea ---------- */
.al-mar--salmonera { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, #0f2d45 0%, #081826 60%, #050d16 100%); overflow: hidden; }
.al-salmonera { position: absolute; inset: 0; width: 100%; height: 100%; }
.al-sal-anillo circle { fill: rgba(220,236,250,.75); }
.al-sal-red circle { fill: rgba(160,200,235,.28); }
.al-sal-pasarelas circle { fill: rgba(220,236,250,.35); }
.al-sal-peces { transform-box: fill-box; transform-origin: center; animation: al-sal-gira var(--d, 26s) linear infinite; }
.al-sal-peces ellipse { fill: rgba(240,160,140,.85); }
@keyframes al-sal-gira { to { transform: rotate(360deg); } }
.al-sal-nota { position: absolute; left: 18px; bottom: 16px; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(220,236,250,.55); }

/* ---------- Disparadores del cuaderno ---------- */
.al-protagonista-ficha, .al-ind-ficha { pointer-events: auto; grid-column: 2; justify-self: start; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(207,168,239,.85); cursor: pointer; transition: color .3s ease; }
.al-protagonista-ficha:hover, .al-ind-ficha:hover { color: #fff; }
.al-ind-ficha { display: inline-block; margin: 14px 0 0 18px; color: var(--violeta); }
.al-ind-ficha:hover { color: var(--tinta); }
.al-nombres-grupo span[data-cuaderno] { cursor: pointer; transition: color .3s ease; }
.al-nombres-grupo span[data-cuaderno]:hover { color: var(--lila) !important; }
.al-menu-escena { cursor: pointer; }
.al-menu-quien::after { content: "↗"; margin-top: 4px; font-size: .8rem; color: rgba(207,168,239,.6); }

/* ---------- El cuaderno ---------- */
html.al-cu-abierto { overflow: hidden; }
.al-cuaderno { position: fixed; inset: 0; z-index: 1100; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(60% 70% at 25% 45%, rgba(126,23,190,.2), transparent 70%), #08050c; color: var(--hueso); opacity: 0; transition: opacity .5s ease; }
.al-cuaderno.al-visible { opacity: 1; }
.al-cuaderno[hidden] { display: none; }
.al-cu-arriba { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px clamp(20px, 4vw, 60px); }
.al-cu-secreto { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lila); }
.al-cu-secreto i { width: 8px; height: 8px; border-radius: 50%; background: #f05c40; box-shadow: 0 0 0 5px rgba(240,92,64,.18); }
.al-cu-x { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(244,239,233,.2); background: transparent; color: var(--hueso); cursor: pointer; }
.al-cu-x .al-icono { width: 20px; height: 20px; }
.al-cu-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 70px); min-height: 0; padding: 0 clamp(20px, 5vw, 90px); }
.al-cu-visual { position: relative; min-height: 0; }
.al-cu-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.al-cu-texto { min-height: 0; overflow-y: auto; padding: 10px 6px 30px 0; scrollbar-width: thin; }
.al-cu-ficha.al-cu-entra > * { animation: al-cu-sube .8s cubic-bezier(.2,.8,.2,1) both; }
.al-cu-ficha.al-cu-entra > *:nth-child(2) { animation-delay: .06s; } .al-cu-ficha.al-cu-entra > *:nth-child(3) { animation-delay: .12s; } .al-cu-ficha.al-cu-entra > *:nth-child(4) { animation-delay: .18s; } .al-cu-ficha.al-cu-entra > *:nth-child(5) { animation-delay: .24s; }
@keyframes al-cu-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.al-cu-n { margin: 0 0 16px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,239,233,.5); }
.al-cu-n i { font-style: normal; color: rgba(244,239,233,.3); }
.al-cu-nombre { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem); line-height: 1; letter-spacing: -0.035em; color: #fff; }
.al-cu-nombre em { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .62em; letter-spacing: -0.01em; color: var(--lila); margin-top: 6px; }
.al-cu-termino { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 22px 0 28px; font-size: .9rem; color: rgba(244,239,233,.5); }
.al-cu-termino s { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: rgba(244,239,233,.75); text-decoration-color: #f05c40; text-decoration-thickness: 1.5px; }
.al-cu-bloques { display: grid; gap: 22px; }
.al-cu-bloques section { padding-top: 18px; border-top: 1px solid rgba(244,239,233,.1); }
.al-cu-bloques h3 { margin: 0 0 10px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--lila); }
.al-cu-bloques p, .al-cu-bloques li { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(244,239,233,.82); }
.al-cu-bloques ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.al-cu-bloques li { position: relative; padding-left: 20px; }
.al-cu-bloques li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--lila); }
.al-cu-conecta p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: #fff; }
.al-cu-fuentes { margin: 26px 0 0; font-size: .74rem; line-height: 1.5; color: rgba(244,239,233,.38); }
.al-cu-abajo { display: flex; align-items: center; gap: 14px; padding: 18px clamp(20px, 4vw, 60px) 26px; border-top: 1px solid rgba(244,239,233,.06); }
.al-cu-abajo > button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244,239,233,.2); background: transparent; color: var(--hueso); cursor: pointer; }
.al-cu-abajo .al-icono { width: 18px; height: 18px; }
.al-cu-ant .al-icono { transform: scaleX(-1); }
.al-cu-indice { flex: 1; display: flex; gap: 6px 18px; overflow-x: auto; scrollbar-width: none; }
.al-cu-indice::-webkit-scrollbar { display: none; }
.al-cu-indice button { flex: none; border: 0; background: none; padding: 6px 0; font: inherit; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: rgba(244,239,233,.4); cursor: pointer; transition: color .3s ease; }
.al-cu-indice button:hover { color: rgba(244,239,233,.8); }
.al-cu-indice button.al-activa { color: #fff; }
@media (max-width: 991px) {
  .al-cu-cuerpo { grid-template-columns: 1fr; grid-template-rows: 32vh 1fr; }
  .al-cu-nombre { font-size: 2.4rem; }
}
@media (min-width: 992px) {
  .al-pista2-etapas .al-etapa-g:nth-child(even) { margin-top: -96px; padding-top: 0; padding-bottom: 18px; }
  .al-pista2-etapas .al-etapa-g:nth-child(even)::before { top: auto; bottom: 0; }
  .al-pista2-etapas .al-etapa-g { width: 150px; }
}
@media (min-width: 992px) {
  .al-pista2-etapas .al-etapa-g--ahora { margin-top: 14px !important; padding-top: 18px !important; padding-bottom: 0 !important; }
  .al-pista2-etapas .al-etapa-g--ahora::before { top: 0 !important; bottom: auto !important; }
  .al-pista2-etapas .al-etapa-g:nth-child(5) { margin-top: -96px; padding-top: 0; padding-bottom: 18px; }
  .al-pista2-etapas .al-etapa-g:nth-child(5)::before { top: auto; bottom: 0; }
  .al-pista2-etapas .al-etapa-g:nth-child(6) { margin-top: 14px; padding-top: 18px; padding-bottom: 0; }
  .al-pista2-etapas .al-etapa-g:nth-child(6)::before { top: 0; bottom: auto; }
}

/* ---------- v17 ---------- */
.al-alianza--empresas { margin-bottom: clamp(40px, 5vw, 64px); }
.al-alianza h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--violeta); }
.al-red-franja { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; margin-top: 28px; padding: 22px 28px; border-radius: var(--radio); border: 1px solid var(--linea); color: var(--texto); text-decoration: none; transition: background-color .4s ease, border-color .4s ease; }
.al-red-franja span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--violeta); }
.al-red-franja b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; }
.al-red-franja b:nth-of-type(3) { font-family: var(--serif); font-style: italic; font-weight: 400; }
.al-red-franja em { flex: 1; font-style: normal; font-size: .92rem; color: var(--texto-2); }
.al-red-franja .al-icono { width: 20px; height: 20px; transition: transform .35s ease; }
.al-red-franja:hover { background: var(--hueso); border-color: transparent; }
.al-red-franja:hover .al-icono { transform: translateX(5px); }
.al-red.al-sec--hueso .al-red-carta:not(.al-red-carta--empresas) { background: var(--papel); }