/* /explorar (tablón de novedades, web/novedades.py) y /metamorph (herramienta en camino). Solo se carga en esas dos páginas. */

/* ---------- Explorar: changelog con línea de tiempo ---------- */
/* Color por tipo de novedad (solo marca: cobalto, verde de «ok», ámbar de IA y neutro). Contraste AA en claro y oscuro. */
.nv-lanzamiento,.nv-t-lanzamiento{--tc:var(--acc-txt)}
.nv-funcion,.nv-t-funcion{--tc:var(--ok)}
.nv-modelos,.nv-t-modelos{--tc:var(--idea)}
.nv-mejora,.nv-t-mejora{--tc:var(--muted)}
.nv-tipo{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tc);
  padding:5px 9px 5px 8px;border-radius:99px;background:color-mix(in srgb,var(--tc) 11%,transparent);border:1px solid color-mix(in srgb,var(--tc) 28%,transparent);white-space:nowrap}
.nv-tipo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Próximamente: Metamorph (franja oscura de marca, igual en los dos modos) */
.nv-prox{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:28px;padding:16px 18px 16px 16px;
  border-radius:20px;text-decoration:none;color:#EEF2FF;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 140% at 0% 0%,#1A2A80 0%,#0E1528 55%,#0A0F1E 100%);border:1px solid rgba(138,156,255,.28);box-shadow:var(--shadow);transition:border-color .2s,transform .2s}
.nv-prox::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(138,156,255,.14) 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.nv-prox:hover{border-color:#8A9CFF;transform:translateY(-1px)}
.nv-prox:focus-visible{outline:2px solid var(--acc-txt);outline-offset:3px}
.nv-prox-vis{position:relative;width:96px;height:72px;flex:none}
.nv-prox-vis i{position:absolute;border-radius:10px}
.nv-prox-vis .a{left:0;top:10px;width:52px;height:56px;background:#F5A524;rotate:-8deg}
.nv-prox-vis .b{left:22px;top:6px;width:52px;height:58px;background:#3D5AFE;rotate:-2deg}
.nv-prox-vis .c{left:44px;top:4px;width:52px;height:64px;background:#121A30;border:1px solid #2E3E66;
  background-image:radial-gradient(circle at 50% 40%,transparent 9px,#EEF2FF 9px 10.5px,transparent 11px),radial-gradient(ellipse 20px 16px at 50% 100%,transparent 15px,#EEF2FF 15px 16.5px,transparent 17px)}
.nv-prox-vis .corte{left:66px;top:-4px;width:2.5px;height:82px;border-radius:2px;background:#8A9CFF;rotate:14deg;box-shadow:0 0 12px rgba(61,90,254,.8)}
.nv-prox-txt{display:grid;gap:3px;min-width:0}
.nv-prox-txt em{font:500 11px var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#F5A524}
.nv-prox-txt b{font:800 22px/1.1 var(--display);letter-spacing:-.03em}
.nv-prox-txt span{color:#A3AECB;font-size:15px;line-height:1.45}
.nv-prox-btn{font:600 14px var(--f);color:#EEF2FF;padding:10px 14px;border-radius:12px;border:1px solid rgba(238,242,255,.22);white-space:nowrap;transition:background .15s,border-color .15s}
.nv-prox:hover .nv-prox-btn{background:#3D5AFE;border-color:#3D5AFE}
@media (max-width:640px){.nv-prox{grid-template-columns:auto minmax(0,1fr)}.nv-prox-btn{grid-column:1/-1;text-align:center}.nv-prox-vis{width:74px;height:60px;scale:.8;transform-origin:0 50%}}

.nv-leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:40px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.nv-leyenda b{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-right:6px}

/* Línea de tiempo: fecha a la izquierda (fija al bajar en escritorio), punto sobre la línea y las tarjetas de ese día */
main .nv-sec{padding-top:0;position:relative}
.nv-dia{--x:5px;position:relative;display:grid;gap:14px;padding:28px 0 6px 28px}
.nv-dia::before{content:"";position:absolute;left:var(--x);top:0;bottom:0;width:1px;background:linear-gradient(var(--line2),var(--line2) 85%,transparent)}
.nv-dia:first-child::before{top:34px}
.nv-fecha{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;align-self:start}
.nv-fecha i{position:absolute;left:calc(-28px + var(--x) - 5.5px);top:7px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.nv-fecha time{font:800 24px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.nv-fecha span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
@media (min-width:1000px){
  .nv-dia{--x:186px;grid-template-columns:170px minmax(0,1fr);column-gap:32px;padding-left:0}
  .nv-fecha{position:sticky;top:96px;display:grid;gap:6px;padding-top:2px}
  .nv-fecha i{left:calc(var(--x) - 5.5px);top:9px}
}
.nvs{display:grid;gap:16px;min-width:0}
@media (min-width:700px){.nvs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.nv{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.nv:hover{border-color:color-mix(in srgb,var(--acc-txt) 55%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow),0 18px 40px -24px rgba(61,90,254,.55)}
.nv:focus-within{border-color:var(--acc-txt)}
.nv-media{position:relative;aspect-ratio:16/10;background:#0A0F1E;overflow:hidden;border-bottom:1px solid var(--line)}
.nv-media img,.nv-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:scale .5s ease}
.nv:hover .nv-media img,.nv:hover .nv-media video{scale:1.03}
.nv-media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(10,15,30,.45));pointer-events:none}
.nv-hecho{position:absolute;left:10px;bottom:10px;z-index:1;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(10,15,30,.72);padding:6px 9px;border-radius:99px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14)}
.nv-txt{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.nv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.nv-herr{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--f);color:var(--muted)}
.nv-herr svg{width:14px;height:14px;color:var(--dim)}
.nv-dest-eti{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--acc);padding:6px 9px;border-radius:99px}
.nv h2{margin:0;font:700 20px/1.18 var(--display);letter-spacing:-.025em;text-wrap:balance}
.nv h2 a{color:var(--ink);text-decoration:none}
.nv h2 a::after{content:"";position:absolute;inset:0;z-index:2}
.nv h2 a:focus-visible{outline:none}
.nv h2 a:focus-visible::after{outline:2px solid var(--acc);outline-offset:-2px;border-radius:20px}
.nv p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.nv-ir{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font:600 14px var(--f);color:var(--acc-txt)}
.nv-ir svg{width:15px;height:15px;transition:translate .2s}
.nv:hover .nv-ir svg{translate:3px 0}
.nv-dest .nv-media{aspect-ratio:16/9}
.nv-dest h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.035em}
.nv-dest p{font-size:16px}
@media (min-width:700px){.nv-dest{grid-column:1/-1}}
@media (min-width:1100px){.nv-dest{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.nv-dest .nv-media{aspect-ratio:auto;min-height:320px;border-bottom:0;border-right:1px solid var(--line)}.nv-dest .nv-txt{padding:28px;justify-content:center}}
@media (min-width:700px){.nv-ancha{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.nv-ancha .nv-media{aspect-ratio:16/10;border-bottom:0;border-right:1px solid var(--line)}.nv-ancha .nv-txt{justify-content:center;padding:22px 24px}}
@media (prefers-reduced-motion:reduce){.nv,.nv-media img,.nv-media video,.nv-ir svg,.nv-prox{transition:none}.nv:hover,.nv-prox:hover{transform:none}.nv:hover .nv-media img{scale:1}}

/* ---------- Metamorph ---------- */
.al-cab{display:grid;gap:36px;padding-top:44px;align-items:center}
@media (min-width:900px){.al-cab{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.al-txt h1{font:800 clamp(40px,6.4vw,74px)/.96 var(--display);letter-spacing:-.05em;margin:16px 0 0;text-wrap:balance}
.al-txt>p{color:var(--muted);font-size:clamp(17px,2vw,19px);margin:18px 0 0;max-width:56ch;text-wrap:pretty}
.al-cab .eti::before{content:none}
.al-punto{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(61,90,254,.55);animation:alPulso 2.2s infinite}
@keyframes alPulso{70%{box-shadow:0 0 0 8px rgba(61,90,254,0)}100%{box-shadow:0 0 0 0 rgba(61,90,254,0)}}
.al-form{margin-top:24px;display:grid;gap:10px;max-width:560px}
.al-fila{display:flex;gap:10px;flex-wrap:wrap}
.al-fila input{flex:1 1 220px;min-width:0}
.al-fila .btn{flex:none;background:var(--imp-lima);color:var(--imp-tinta);font-weight:800;box-shadow:0 3px 0 var(--imp-lima-sombra)}
@media (max-width:480px){.al-fila .btn{flex:1 1 100%}}
.al-check{display:block;position:relative;padding-left:28px;font-size:14px;line-height:1.45;color:var(--muted)}
.al-check input{position:absolute;left:0;top:1px;width:18px;height:18px;margin:0;accent-color:var(--acc-txt)}
.al-check a{color:var(--ink)}
.al-form .msg{margin:0;min-height:1.3em;font-size:14.5px}
.al-txt>.al-nota{margin:10px 0 0;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}

/* Hero: fotograma ilustrado. Los «mundos» (escenario, época, estilo) entran con un corte en diagonal (el gesto de la marca)
   detrás de una silueta lineal que no cambia (el movimiento se conserva). Solo CSS/SVG: no es un resultado real. */
.al-visual{margin:0;display:grid;gap:12px;justify-items:center;position:relative}
.al-visual::before{content:"";position:absolute;inset:6% 4% 14%;background:radial-gradient(closest-side,rgba(61,90,254,.38),transparent);filter:blur(30px);z-index:-1}
.al-visual figcaption{font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:center}
.al-marco{--d:12s;position:relative;width:min(100%,400px);aspect-ratio:4/5;border-radius:26px;overflow:hidden;isolation:isolate;background:#0A0F1E;
  border:1px solid rgba(138,156,255,.28);box-shadow:0 0 0 6px rgba(61,90,254,.07),0 40px 80px -36px rgba(10,15,30,.7)}
.al-mundos{position:absolute;inset:0}
.al-mundos .mw{position:absolute;inset:0;width:100%;height:100%;display:block;clip-path:polygon(-40% 0,140% 0,110% 100%,-40% 100%);animation:alMundo var(--d) linear infinite}
.al-mundos .mw1{animation-delay:-1s}.al-mundos .mw2{animation-delay:-9s}.al-mundos .mw3{animation-delay:-5s}
@keyframes alMundo{
  0%{clip-path:polygon(-40% 0,-5% 0,-35% 100%,-40% 100%);z-index:3;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  8%{clip-path:polygon(-40% 0,140% 0,110% 100%,-40% 100%);z-index:3}
  33.3%{clip-path:polygon(-40% 0,140% 0,110% 100%,-40% 100%);z-index:3}
  33.4%,66.6%{clip-path:polygon(-40% 0,140% 0,110% 100%,-40% 100%);z-index:2}
  66.7%,100%{clip-path:polygon(-40% 0,140% 0,110% 100%,-40% 100%);z-index:1}}
.al-corte{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;animation:alCorte calc(var(--d)/3) linear infinite;animation-delay:-1s}
.al-corte i{position:absolute;top:-12%;bottom:-12%;left:50%;width:3px;margin-left:-1.5px;rotate:13.5deg;border-radius:3px;
  background:linear-gradient(#fff,#8A9CFF 40%,#F5A524);box-shadow:0 0 18px 4px rgba(61,90,254,.65),0 0 2px #fff}
@keyframes alCorte{0%{translate:-70% 0;opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}24%{translate:75% 0;opacity:1}24.1%,100%{translate:75% 0;opacity:0}}
.al-fig{position:absolute;inset:0;width:100%;height:100%;z-index:5;display:block}
.al-cuerpo-g{transform-box:view-box;transform-origin:50% 100%;animation:alMueve 6s ease-in-out infinite}
@keyframes alMueve{25%{rotate:1.6deg}75%{rotate:-1.6deg}}
.al-track{opacity:.85}
.al-marco::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,30,.55),transparent 18%,transparent 66%,rgba(10,15,30,.85))}
.al-rec,.al-fmt{position:absolute;top:14px;z-index:7;display:flex;align-items:center;gap:7px;font:500 11px var(--mono);letter-spacing:.08em;color:#EEF2FF;
  background:rgba(10,15,30,.55);border:1px solid rgba(238,242,255,.14);padding:5px 9px;border-radius:99px;backdrop-filter:blur(8px)}
.al-rec{left:14px}
.al-rec::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5C7A;animation:alRec 1.6s steps(2) infinite}
@keyframes alRec{50%{opacity:.25}}
.al-rec em{font-style:normal;color:#A3AECB;font-variant-numeric:tabular-nums}
.al-fmt{right:14px;color:#A3AECB}
.al-panel{position:absolute;left:12px;right:12px;bottom:12px;z-index:7;display:grid;gap:9px;padding:10px;border-radius:16px;
  background:rgba(10,15,30,.66);border:1px solid rgba(238,242,255,.12);backdrop-filter:blur(10px)}
.al-prog{display:block;height:3px;border-radius:3px;background:rgba(238,242,255,.14);overflow:hidden}
.al-prog i{display:block;height:100%;background:linear-gradient(90deg,#3D5AFE,#8A9CFF);transform-origin:0 50%;animation:alProg calc(var(--d)/3) linear infinite;animation-delay:-1s}
@keyframes alProg{from{scale:0 1}to{scale:1 1}}
.al-capas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.al-capa{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;font:600 12px/1 var(--f);padding:8px 6px;border-radius:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(238,242,255,.62);background:rgba(238,242,255,.06);animation:alCapa var(--d) linear infinite}
.al-capa i{width:7px;height:7px;flex:none;border-radius:2px;background:currentColor;opacity:.8}
.al-capa.c1{--c:#3D5AFE;--t:#fff;animation-delay:-1s}.al-capa.c2{--c:#F5A524;--t:#0A0F1E;animation-delay:-9s}.al-capa.c3{--c:#EEF2FF;--t:#0A0F1E;animation-delay:-5s}
@keyframes alCapa{0%,32%{background:var(--c);color:var(--t)}34%,100%{background:rgba(238,242,255,.06);color:rgba(238,242,255,.62)}}
@media (prefers-reduced-motion:reduce){
  .al-mundos .mw,.al-corte,.al-cuerpo-g,.al-prog i,.al-capa,.al-rec::before,.al-punto{animation:none}
  .al-mundos .mw2,.al-mundos .mw3,.al-corte{display:none}
  .al-prog i{scale:.35 1}
  .al-capa.c1{background:var(--c);color:var(--t)}
}

/* Tres formas: tarjetas con mini ilustración (mismo lenguaje que el hero) */
.al-grid{display:grid;gap:14px;margin-top:28px}
@media (min-width:860px){.al-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.al-card{padding:12px 12px 22px;display:grid;gap:10px;align-content:start;position:relative;transition:border-color .2s,transform .2s}
.al-card:hover{border-color:color-mix(in srgb,var(--acc-txt) 45%,var(--line))}
.al-card>h3,.al-card>p,.al-card>.al-tags,.al-card>.al-fila-n{margin-left:10px;margin-right:10px}
.al-ilu{position:relative;height:150px;border-radius:14px;overflow:hidden;display:grid;place-items:center;margin-bottom:6px;
  background:radial-gradient(120% 90% at 50% 0%,#1A2550 0%,#0A0F1E 70%);border:1px solid rgba(138,156,255,.16)}
.al-ilu::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(138,156,255,.16) 1px,transparent 1px);background-size:14px 14px;
  mask-image:linear-gradient(180deg,#000,transparent 80%)}
.al-ilu svg{position:relative;width:100%;height:100%;max-width:340px;padding:8px 12px}
.al-fila-n{display:flex;align-items:center;justify-content:space-between}
.al-card h3{margin:0;font:700 22px/1.15 var(--display);letter-spacing:-.025em}
.al-card p{margin:0;color:var(--muted)}
.al-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.al-ic svg{width:18px;height:18px}
.al-ic-1{background:var(--acc);color:#fff}
.al-ic-2{background:#F5A524;color:#0A0F1E}
.al-ic-3{background:var(--acc-soft);color:var(--acc-txt);border:1px solid color-mix(in srgb,var(--acc-txt) 30%,transparent)}
.al-n{font:500 12px var(--mono);letter-spacing:.08em;color:var(--dim)}
.al-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.al-tags li{font:500 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:99px;background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.al-estado{margin-top:12px;padding:clamp(20px,3vw,32px);display:grid;gap:22px;position:relative;overflow:hidden}
.al-estado::before{content:"";position:absolute;right:-120px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,var(--acc-soft),transparent);pointer-events:none}
@media (min-width:900px){.al-estado{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.al-ya{display:grid;gap:8px;position:relative}
.al-ya a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:var(--bg);transition:border-color .15s,transform .15s}
.al-ya a:hover{border-color:var(--acc-txt);transform:translateX(2px)}
.al-ya b{font:700 16px var(--f)}
.al-ya b::after{content:" →";color:var(--acc-txt)}
.al-ya span{color:var(--muted);font-size:14px}