/* ==========================================================================
   v41 · Página Proyectos (proyectos.html · ES/EN/PT)
   En foco · Índice de los nueve (filtros + foto flotante) · El ciclo · Tu lugar
   ========================================================================== */

/* ---------- 1. En foco ---------- */
.al-pj-foco-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(36px, 4vw, 56px); }
.al-pj-estreno { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(520px, 44vw, 640px); border-radius: 28px; background: #120c0c; color: #F3F3F3; }
.al-pj-estreno-foto { position: absolute; inset: 0; z-index: -2; }
.al-pj-estreno-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.04); transition: transform 2.2s cubic-bezier(.2,.8,.2,1); filter: saturate(.85); }
.al-pj-estreno:hover .al-pj-estreno-foto img { transform: scale(1); }
.al-pj-estreno::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,7,8,.1) 0%, rgba(10,7,8,.45) 34%, rgba(10,7,8,.9) 62%, rgba(10,7,8,.97) 100%), radial-gradient(80% 60% at 0% 100%, rgba(233,59,36,.22), transparent 70%); }
.al-pj-estreno-txt { padding: clamp(26px, 3.4vw, 48px); max-width: 640px; }
.al-pj-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 6px 13px; border-radius: 99px; border: 1px solid rgba(243,243,243,.22); background: rgba(10,7,8,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #F3F3F3; }
.al-pj-badge--vivo i { width: 7px; height: 7px; border-radius: 50%; background: #E93B24; box-shadow: 0 0 0 0 rgba(233,59,36,.6); animation: al-pj-pulso 1.9s ease-out infinite; }
@keyframes al-pj-pulso { 0% { box-shadow: 0 0 0 0 rgba(233,59,36,.6); } 100% { box-shadow: 0 0 0 10px rgba(233,59,36,0); } }
.al-pj-estado { margin: 0 0 8px; font-size: .8rem; letter-spacing: .06em; color: rgba(243,243,243,.66); }
.al-pj-estreno h3 { margin: 0 0 14px; font-family: var(--display); font-weight: 500; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); line-height: .98; letter-spacing: -.03em; color: #F3F3F3; }
.al-pj-estreno h3 em { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .62em; letter-spacing: 0; color: #E9786A; }
.al-pj-estreno-p { margin: 0 0 26px; max-width: 34em; font-size: 1.02rem; line-height: 1.6; color: rgba(243,243,243,.82); }
.al-pj-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

.al-pj-foco-lado { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.al-pj-mini { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: 24px; border: 1px solid rgba(244,239,233,.1); background: rgba(244,239,233,.04); color: var(--hueso) !important; text-decoration: none !important; transition: border-color .35s ease, background .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.al-pj-mini:hover, .al-pj-mini:focus-visible { border-color: rgba(207,168,239,.45); background: rgba(244,239,233,.07); transform: translateY(-3px); outline: none; }
.al-pj-mini:focus-visible { box-shadow: 0 0 0 3px var(--lila); }
.al-pj-mini-foto { position: relative; overflow: hidden; min-height: 100%; }
.al-pj-mini-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.al-pj-mini:hover .al-pj-mini-foto img { transform: scale(1.06); }
.al-pj-mini-txt { display: flex; flex-direction: column; padding: clamp(20px, 2vw, 28px); }
.al-pj-mini .al-pj-badge { align-self: flex-start; margin-bottom: 12px; padding: 5px 11px; font-size: .62rem; border-color: rgba(207,168,239,.3); background: rgba(126,23,190,.18); color: var(--lila); }
.al-pj-mini h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + .7vw, 1.7rem); line-height: 1.08; letter-spacing: -.02em; color: var(--hueso); }
.al-pj-mini h3 em { display: block; margin-top: 3px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .78em; letter-spacing: 0; color: var(--lila); }
.al-pj-mini-txt > p:not(.al-pj-badge) { margin: 0 0 16px; font-size: .86rem; line-height: 1.55; color: rgba(244,239,233,.66); }
.al-pj-ir { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hueso); }
.al-pj-ir .al-icono { width: 14px; height: 14px; transition: transform .3s ease; }
.al-pj-mini:hover .al-pj-ir .al-icono { transform: translateX(4px); }

/* ---------- 2. Índice de los nueve ---------- */
.al-pj-indice { position: relative; }
.al-pj-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin: clamp(30px, 3.6vw, 48px) 0 clamp(14px, 1.6vw, 22px); }
.al-pj-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.al-pj-filtro { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--linea, rgba(27,22,32,.12)); background: var(--papel, #fbf9f6); color: var(--texto, #1b1620); font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.al-pj-filtro .al-pj-n { font-style: normal; font-size: .68rem; color: var(--texto-3, #8b8392); }
.al-pj-filtro sup { top: 0; font-size: .66rem; color: var(--texto-3, #8b8392); }
.al-pj-filtro:hover { border-color: var(--violeta); transform: translateY(-1px); }
.al-pj-filtro.al-on { background: #0b0710; border-color: #0b0710; color: #fff; }
.al-pj-filtro.al-on .al-pj-n, .al-pj-filtro.al-on sup { color: var(--lila); }
.al-pj-filtro:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.al-pj-leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.al-pj-leyenda li { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--texto-2, #5f5866); }
.al-pj-leyenda b { font-weight: 600; color: var(--texto, #1b1620); }
.al-pj-leyenda span { color: var(--texto-3, #8b8392); }
.al-pj-tipo i, .al-pj-leyenda i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
[data-tipo="programa"] > i { background: var(--violeta); }
[data-tipo="campana"] > i { background: #E93B24; }
[data-tipo="pieza"] > i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--violeta); }

.al-pj-lista { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--linea, rgba(27,22,32,.12)); }
.al-pj-fila { border-top: 1px solid var(--linea, rgba(27,22,32,.12)); }
.al-pj-fila.al-fuera { display: none; }
.al-pj-fila.al-entra-f { animation: al-pj-entra .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--fd, 0ms); }
@keyframes al-pj-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.al-pj-fila > a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 210px 230px 52px; align-items: center; gap: 20px; padding: clamp(20px, 2.2vw, 30px) 12px; color: inherit !important; text-decoration: none !important; transition: background .35s ease, padding .45s cubic-bezier(.2,.8,.2,1); }
.al-pj-fila > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(126,23,190,.07), rgba(126,23,190,0) 70%); opacity: 0; transition: opacity .35s ease; }
.al-pj-fila > a:hover::before, .al-pj-fila > a:focus-visible::before { opacity: 1; }
.al-pj-fila > a:focus-visible { outline: 2px solid var(--violeta); outline-offset: -2px; }
.al-pj-num { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--texto-3, #8b8392); transition: color .3s ease; }
.al-pj-mini-img { display: none; }
.al-pj-nom { display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.al-pj-nom b { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.6rem); line-height: 1.02; letter-spacing: -.03em; color: var(--texto, #1b1620); transition: color .3s ease; }
.al-pj-nom em { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, .92rem + .3vw, 1.2rem); color: var(--violeta); }
.al-pj-nom small { max-width: 38em; font-size: .86rem; line-height: 1.5; color: var(--texto-2, #5f5866); }
.al-pj-meta { display: flex; flex-direction: column; gap: 7px; font-size: .78rem; }
.al-pj-frente { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; color: var(--texto-2, #5f5866); }
.al-pj-tipo { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-2, #5f5866); }
.al-pj-dato { display: flex; flex-direction: column; gap: 2px; }
.al-pj-dato b { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + .8vw, 1.8rem); line-height: 1; letter-spacing: -.02em; color: var(--texto, #1b1620); }
.al-pj-dato span { font-size: .8rem; line-height: 1.35; color: var(--texto-2, #5f5866); }
.al-pj-flecha { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea, rgba(27,22,32,.14)); color: var(--texto, #1b1620); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.al-pj-flecha .al-icono { width: 16px; height: 16px; }
.al-pj-fila > a:hover .al-pj-nom, .al-pj-fila > a:focus-visible .al-pj-nom { transform: translateX(10px); }
.al-pj-fila > a:hover .al-pj-nom b { color: var(--violeta); }
.al-pj-fila > a:hover .al-pj-num { color: var(--violeta); }
.al-pj-fila > a:hover .al-pj-flecha, .al-pj-fila > a:focus-visible .al-pj-flecha { background: var(--violeta); border-color: var(--violeta); color: #fff; transform: rotate(-45deg); }

/* foto que sigue al cursor */
.al-pj-flota { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(240px, 22vw, 340px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.86) rotate(-3deg); transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 30px 60px -20px rgba(27,10,40,.45); will-change: transform, left, top; }
.al-pj-flota.al-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(-2deg); }
.al-pj-flota img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .al-pj-flota { display: none; } }

/* ---------- 3. El ciclo ---------- */
.al-pj-etapas { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); margin: clamp(40px, 5vw, 70px) 0 0; padding: 0; list-style: none; }
.al-pj-etapas::before { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(3rem, 2rem + 3vw, 5rem) + 22px); height: 1px; background: linear-gradient(90deg, rgba(207,168,239,.15), rgba(207,168,239,.55) 50%, rgba(233,59,36,.5)); }
.al-pj-etapa { position: relative; }
.al-pj-etapa-n { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(207,168,239,.55); transition: color .4s ease; }
.al-pj-etapa-punto { position: relative; display: block; width: 13px; height: 13px; margin: 16px 0 22px; border-radius: 50%; background: #0b0710; box-shadow: 0 0 0 1.5px var(--lila); transition: background .35s ease, box-shadow .35s ease; }
.al-pj-etapa:hover .al-pj-etapa-punto { background: var(--lila); box-shadow: 0 0 0 1.5px var(--lila), 0 0 0 8px rgba(207,168,239,.14); }
.al-pj-etapa:hover .al-pj-etapa-n { color: rgba(207,168,239,.18); }
.al-pj-etapa h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1rem + .7vw, 1.7rem); letter-spacing: -.02em; color: var(--hueso); }
.al-pj-etapa p { margin: 0 0 18px; font-size: .9rem; line-height: 1.55; color: rgba(244,239,233,.66); }
.al-pj-etapa-proy { display: flex; flex-wrap: wrap; gap: 6px; }
.al-pj-etapa-proy a { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(244,239,233,.16); font-size: .76rem; color: var(--hueso) !important; text-decoration: none !important; transition: background .25s ease, border-color .25s ease; }
.al-pj-etapa-proy a:hover, .al-pj-etapa-proy a:focus-visible { background: rgba(126,23,190,.4); border-color: var(--lila); outline: none; }
.al-pj-vuelve { display: flex; align-items: center; gap: 14px; margin: clamp(36px, 4vw, 54px) 0 0; padding-top: 22px; border-top: 1px dashed rgba(244,239,233,.16); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem); color: rgba(244,239,233,.82); }
.al-pj-vuelve svg { flex: none; width: 54px; height: 24px; color: #E9786A; }

/* ---------- 4. Tu lugar ---------- */
.al-pj-lugares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(34px, 4vw, 56px); }
.al-pj-lugar { display: flex; flex-direction: column; padding: clamp(26px, 2.8vw, 38px); border-radius: 24px; border: 1px solid var(--linea, rgba(27,22,32,.12)); background: var(--papel, #fbf9f6); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease; }
.al-pj-lugar:hover { transform: translateY(-4px); border-color: rgba(126,23,190,.3); box-shadow: 0 24px 50px -26px rgba(126,23,190,.35); }
.al-pj-lugar:nth-child(2) { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.al-pj-lugar-n { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--violeta); }
.al-pj-lugar:nth-child(2) .al-pj-lugar-n { color: var(--lila); }
.al-pj-lugar h3 { margin: 14px 0 8px; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); letter-spacing: -.02em; color: inherit; }
.al-pj-lugar p { margin: 0 0 22px; font-size: .92rem; line-height: 1.55; color: var(--texto-2, #5f5866); }
.al-pj-lugar:nth-child(2) p { color: rgba(255,255,255,.8); }
.al-pj-lugar ul { margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linea, rgba(27,22,32,.12)); }
.al-pj-lugar:nth-child(2) ul, .al-pj-lugar:nth-child(2) li { border-color: rgba(255,255,255,.22); }
.al-pj-lugar li { border-bottom: 1px solid var(--linea, rgba(27,22,32,.12)); }
.al-pj-lugar li:last-child { border-bottom: 0; }
.al-pj-lugar li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: .95rem; font-weight: 500; color: inherit !important; text-decoration: none !important; transition: padding .35s cubic-bezier(.2,.8,.2,1), color .25s ease; }
.al-pj-lugar li a .al-icono { width: 15px; height: 15px; flex: none; transition: transform .3s ease; }
.al-pj-lugar li a:hover, .al-pj-lugar li a:focus-visible { padding-left: 8px; color: var(--violeta) !important; outline: none; }
.al-pj-lugar:nth-child(2) li a:hover, .al-pj-lugar:nth-child(2) li a:focus-visible { color: #fff !important; }
.al-pj-lugar li a:hover .al-icono { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .al-pj-fila > a { grid-template-columns: 46px minmax(0, 1fr) 180px 46px; }
  .al-pj-meta { display: none; }
}
@media (max-width: 991px) {
  .al-pj-foco-grid { grid-template-columns: 1fr; }
  .al-pj-foco-lado { grid-template-rows: none; }
  .al-pj-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .al-pj-etapas::before { display: none; }
  .al-pj-lugares { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .al-pj-estreno { min-height: 540px; border-radius: 22px; }
  .al-pj-mini { grid-template-columns: 1fr; }
  .al-pj-mini-foto { aspect-ratio: 16 / 9; min-height: 0; }
  .al-pj-filtros { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .al-pj-filtros::-webkit-scrollbar { display: none; }
  .al-pj-filtro { flex: none; }
  .al-pj-leyenda { flex-direction: column; gap: 6px; }
  .al-pj-fila > a { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "img nom" "img dato"; gap: 6px 16px; padding: 18px 0; }
  .al-pj-num, .al-pj-flecha, .al-pj-meta { display: none; }
  .al-pj-mini-img { grid-area: img; display: block; align-self: start; width: 84px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
  .al-pj-mini-img img { width: 100%; height: 100%; object-fit: cover; }
  .al-pj-nom { grid-area: nom; }
  .al-pj-nom b { font-size: 1.45rem; }
  .al-pj-nom small { display: none; }
  .al-pj-dato { grid-area: dato; flex-direction: row; align-items: baseline; gap: 6px; }
  .al-pj-dato b { font-size: 1.05rem; }
  .al-pj-fila > a:hover .al-pj-nom { transform: none; }
  .al-pj-etapas { grid-template-columns: 1fr; row-gap: 30px; }
  .al-pj-etapa { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .al-pj-etapa-n { grid-row: span 3; font-size: 2.6rem; }
  .al-pj-etapa-punto { display: none; }
  .al-pj-etapa h3 { margin-top: 4px; }
  .al-pj-estreno-txt { padding: 24px 22px 26px; }
  .al-pj-estreno .al-pj-badge { font-size: .62rem; padding: 5px 11px; }
  .al-pj-estreno h3 { font-size: 2.4rem; }
  .al-pj-estreno-p { font-size: .95rem; }
  .al-pj-vuelve { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .al-pj-badge--vivo i { animation: none; }
  .al-pj-fila.al-entra-f { animation: none; }
  .al-pj-estreno-foto img, .al-pj-mini-foto img, .al-pj-nom, .al-pj-flecha, .al-pj-lugar, .al-pj-mini { transition: none; transform: none !important; }
  .al-pj-flota { display: none; }
}

/* ---------- Portada: accesos a cada bloque ---------- */
.al-pj-saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.al-pj-saltos a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(244,239,233,.18); background: rgba(244,239,233,.04); font-size: .78rem; color: var(--hueso, #f4efe9) !important; text-decoration: none !important; transition: background .25s ease, border-color .25s ease; }
.al-pj-saltos a i { font-style: normal; font-family: var(--serif); font-size: .9rem; color: var(--lila); }
.al-pj-saltos a:hover, .al-pj-saltos a:focus-visible { background: rgba(126,23,190,.35); border-color: var(--lila); outline: none; }