/* La página como app (3 nov). Natalia: «Desplegar la información por sectores, como sucede en una app: poder ir
   ahondando sin perder el lugar.» Sustituye al corte narrativo (f4/tiempos.css): sin umbrales ni puentes.
   No cambia el lenguaje de la casa (portadas intervenidas con objetos de color, dock de cristal, la entrada, el movimiento):
   cambia cómo se recorre.
     · El inicio: la entrada, encuadrada más baja, y el menú de cinco portadas (una por sector), casi sin scroll.
     · Cada sector es una vista de pantalla completa que entra desde la derecha (app.js): barra con «‹», su nombre y
       Hablemos; su propio scroll; al final, Hablemos.
     · Sin JS (html sin .app): todo se lee en orden como una página larga, sin barras de vista.
   Movimiento: 400 ms, cubic-bezier(.2,.7,.2,1); sólo transform y opacity. Con movimiento reducido, nada se desliza. */

:root{--app-entra:cubic-bezier(.2,.7,.2,1);--app-dur:400ms;--vb-alto:58px;--ent-h:clamp(420px,58svh,540px)}

/* ═════ La barra de arriba del inicio: su nombre (al bajar) y Hablemos ═════ */
.barra .barra-hablemos{margin-left:auto;min-height:44px;pointer-events:auto}

/* ═════ El inicio: la entrada, más baja, para que el menú quepa debajo. Su foto sólo se encuadra. ═════ */
.aire:not(.aire-casa){min-height:0}
@media (max-width:899px){
 .aire:not(.aire-casa){--aire-ih:clamp(300px,calc(var(--ent-h) * 1.32),720px)}
 .aire:not(.aire-casa) .aire-marco{min-height:var(--ent-h);padding-bottom:18px}
}
@media (max-width:899px) and (max-height:700px){:root{--ent-h:clamp(380px,60svh,440px)}}
@media (min-width:900px){
 :root{--ent-h:clamp(440px,calc(100svh - 360px),640px)}
 .aire:not(.aire-casa){--aire-ih:calc(var(--ent-h) * 1.9)}
 .aire:not(.aire-casa) .aire-marco{min-height:var(--ent-h);padding-top:84px;padding-bottom:26px}
}

/* ═════ El menú: cinco portadas, cada una con su objeto y su color; sólo el título ═════ */
.menu{--c:#e6b4c2;position:relative;z-index:2;padding:12px var(--gd,16px) calc(var(--dk-libre,104px) + 4px) var(--g,16px);background:var(--onix,#0b0a0c)}
.mn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mn-li{display:flex;min-width:0}
.mn-resolver{grid-column:1/-1}
.mn-p{position:relative;isolation:isolate;overflow:hidden;flex:1;display:block;min-height:164px;border-radius:4px;color:var(--platino-claro,#f3f2f5);
 text-decoration:none;-webkit-tap-highlight-color:transparent;
 background:radial-gradient(110% 85% at 62% 34%,rgb(255 255 255/.06),transparent 60%),linear-gradient(165deg,#18151b,#0e0c10 70%);
 box-shadow:inset 0 0 0 1px rgb(243 242 245/.08),0 16px 36px rgb(0 0 0/.36);
 transition:transform .22s var(--app-entra),box-shadow .22s var(--app-entra)}
/* la luz de su color, detrás del objeto */
.mn-p::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(70% 70% at 64% 38%,color-mix(in srgb,var(--c) 30%,transparent),transparent 72%)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.mn-p::before{display:none}}
.mn-arte{position:absolute;inset:0 0 48px;pointer-events:none}
/* el objeto cabe entero en su espacio (posición absoluta: el SVG se ajusta a lo que queda, sin desbordarse) */
.mn-obj{position:absolute;inset:14px 12px 0;display:block;width:calc(100% - 24px);height:calc(100% - 14px);max-width:220px;margin:auto;overflow:visible;
 filter:drop-shadow(0 10px 16px rgb(0 0 0/.35))}
.mn-t{position:absolute;left:16px;bottom:14px;font:400 26px/1 var(--didona,"Bodoni Moda",Didot,Georgia,serif);letter-spacing:-.01em;color:var(--platino-claro,#f3f2f5)}
.mn-t::after{content:"";display:block;width:20px;height:2px;margin-top:9px;border-radius:2px;background:var(--c)}
.mn-p:focus-visible{outline:2px solid var(--rosa-hilo,#c45c7c);outline-offset:3px}
.mn-p:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
 .mn-p:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 22px 44px rgb(0 0 0/.42)}
 .mn-p:hover .mn-obj{transform:scale(1.04)}
}
.mn-obj{transition:transform .3s var(--app-entra)}

/* Resolver va primero y a lo ancho: el objeto a la derecha, el título a la izquierda */
.mn-resolver .mn-p{min-height:140px}
.mn-resolver .mn-arte{left:auto;width:52%;inset-block:0}
.mn-resolver .mn-obj{inset:12px 16px 12px 0;width:calc(100% - 16px);height:calc(100% - 24px)}
.mn-resolver .mn-p::before{background:radial-gradient(60% 90% at 76% 50%,color-mix(in srgb,var(--c) 30%,transparent),transparent 72%)}
.mn-resolver .mn-t{font-size:32px;bottom:18px;left:18px}

/* Natalia: su foto, sólo encuadrada (sin filtros ni capas encima); su voz, abajo, en rosa */
.mn-natalia .mn-arte{inset:0 0 58px}
.mn-foto{position:absolute;inset:0;overflow:hidden;background:#060506}
.mn-foto img{width:100%;height:100%;object-fit:cover;object-position:52% 16%}
.mn-onda{position:absolute;right:14px;bottom:-40px;display:flex;align-items:center;gap:3px;height:22px}
.mn-onda i{display:block;width:3px;height:calc(var(--a) * 22px);border-radius:2px;background:var(--c);opacity:.9}

/* Los objetos se mueven poco y despacio, sólo mientras el inicio se ve */
.mn-aguja{transform-box:view-box;transform-origin:110px 132px}
.mn-pieza{transform-box:fill-box;transform-origin:50% 50%}
.mn-escalones>g{transform-box:fill-box}
.mn-halo,.mn-rombo{transform-box:fill-box;transform-origin:50% 50%}
.mn-caps>g{transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
 .mn-aguja{animation:mn-gira 14s linear infinite}
 .mn-pieza{animation:mn-acomoda 6s var(--app-entra) infinite}
 .mn-escalones>g{animation:mn-luz 5.4s ease-in-out infinite;animation-delay:calc(var(--k) * .3s)}
 .mn-halo{animation:mn-halo 5.4s ease-in-out infinite 1.5s}
 .mn-rombo{animation:mn-flota 5.4s ease-in-out infinite 1.5s}
 .mn-onda i{animation:mn-voz 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -170ms)}
 .mn-caps>g{animation:mn-capsula 6.4s ease-in-out infinite;animation-delay:calc(var(--k) * .8s)}
 /* la llegada: después del oficio, las portadas suben escalonadas (60 ms) */
 .mn-li{animation:mn-sube .5s var(--app-entra) calc(1.25s + var(--i) * 60ms) backwards}
}
@keyframes mn-gira{to{transform:rotate(360deg)}}
@keyframes mn-acomoda{0%,12%{transform:translate(26px,30px) rotate(16deg);opacity:0}30%{opacity:1}52%,100%{transform:none;opacity:1}}
@keyframes mn-luz{0%,100%{opacity:.5}35%{opacity:1}}
@keyframes mn-halo{0%,100%{opacity:.55;transform:scale(.9)}45%{opacity:1;transform:scale(1.06)}}
@keyframes mn-flota{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
@keyframes mn-voz{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes mn-capsula{0%,14%,100%{transform:none;filter:none}6%{transform:scale(1.14);filter:brightness(1.25)}}
@keyframes mn-sube{from{opacity:0;transform:translateY(14px)}}

/* Computadora: las cinco en una fila, debajo de la entrada */
@media (min-width:900px){
 .menu{padding:18px max(56px,4.4vw) calc(var(--dk-libre,104px) - 10px)}
 .mn{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
 .mn-resolver{grid-column:auto}
 .mn-p,.mn-resolver .mn-p{min-height:clamp(196px,calc(100svh - var(--ent-h) - 128px),300px)}
 .mn-resolver .mn-arte{left:0;width:auto;inset:0 0 60px}
 .mn-resolver .mn-obj{inset:16px 14px 0;width:calc(100% - 28px);height:calc(100% - 16px)}
 .mn-resolver .mn-p::before{background:radial-gradient(70% 70% at 64% 38%,color-mix(in srgb,var(--c) 30%,transparent),transparent 72%)}
 .mn-t,.mn-resolver .mn-t{left:18px;bottom:16px;font-size:clamp(26px,2.1vw,32px)}
 .mn-arte{inset:0 0 60px}
 .mn-obj{inset:16px 14px 0;width:calc(100% - 28px);height:calc(100% - 16px)}
 .mn-natalia .mn-arte{inset:0 0 64px}
 .mn-onda{bottom:-44px;right:18px}
}

/* ═════ Las vistas ═════ */
.vb,.vista-fin{display:none}
.app .app-vista{display:none;position:relative;min-height:100svh;background:var(--onix,#0b0a0c)}
.app .app-vista.activa{display:block}
/* el inicio no se quita del documento (si no, al volver repetiría su llegada): sale del flujo, invisible y quieto */
.app .app-inicio.app-oculta{position:fixed;inset:0;z-index:-1;overflow:hidden;visibility:hidden;pointer-events:none}
.app .app-inicio.app-oculta *{animation-play-state:paused!important}
/* un instante antes de deslizarse, la vista se coloca invisible en su lugar: lo que se revela al asomarse empieza a tiempo */
.app .app-vista.app-capa.app-prepara{transform:none;opacity:0}
/* el foco que la app pone en un titular no se dibuja si se llegó tocando */
.app .app-vista [tabindex="-1"]:focus{outline:none}
.app.app-hash:not(.app-lista) .app-inicio{visibility:hidden}
/* en una vista, su barra sustituye a la de la casa */
.app.en-vista .barra{display:none}
/* el hilo de la casa se vuelve a trazar al llegar a cada vista: mientras pasa, no se ve */
.app #hilo{transition:opacity .3s var(--app-entra) .12s}
.app.transita #hilo{opacity:0;transition:none}

/* la capa que entra o sale: fija, con su propio scroll, encima de todo menos del dock */
.app .app-vista.app-capa{position:fixed;inset:0;z-index:45;overflow:hidden;transform:translate3d(100%,0,0);
 box-shadow:-28px 0 56px rgb(0 0 0/.5);will-change:transform}
.app .app-vista.app-capa.app-dentro{transform:none}
.app .app-vista.app-capa.app-mueve{transition:transform var(--app-dur) var(--app-entra)}
/* lo que queda debajo se hace a un lado y se apaga un poco */
.app .app-atras{transform:translate3d(-8%,0,0);opacity:.5}
.app .app-atras-mueve{transition:transform var(--app-dur) var(--app-entra),opacity var(--app-dur) var(--app-entra)}

/* La barra de la vista: «‹», su nombre (aparece cuando el titular pasa por debajo) y Hablemos */
.app .vb{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:6px;
 height:calc(var(--vb-alto) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(14px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));
 background:rgb(11 10 12/.84);-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
.vb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
 background:linear-gradient(90deg,rgb(243 242 245/.05),var(--c) 50%,rgb(243 242 245/.05));opacity:.45}
.vb-atras{appearance:none;flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;
 background:none;color:var(--platino-claro,#f3f2f5);cursor:pointer;-webkit-tap-highlight-color:transparent}
.vb-atras svg{width:26px;height:26px;fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--app-entra)}
.vb-atras:focus-visible{outline:2px solid var(--rosa-hilo,#c45c7c);outline-offset:-2px}
@media (hover:hover){.vb-atras:hover{background:rgb(255 255 255/.06)}.vb-atras:hover svg{transform:translateX(-2px)}}
.vb-atras:active{background:rgb(255 255 255/.08)}
.vb-t{flex:1;min-width:0;margin:0;font:400 20px/1 var(--didona,"Bodoni Moda",Georgia,serif);letter-spacing:-.005em;color:var(--platino-claro,#f3f2f5);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translate3d(0,6px,0);transition:opacity .25s var(--app-entra),transform .25s var(--app-entra)}
.vb.vb-con-t .vb-t{opacity:1;transform:none}
.vb .hablemos{flex:none;margin-left:auto;min-height:44px}
@media (min-width:900px){
 :root{--vb-alto:68px}
 .app .vb{padding-left:max(32px,calc(4.4vw - 12px));padding-right:max(56px,4.4vw)}
 .vb-t{font-size:21px}
}

/* El cierre de cada vista: Hablemos, con aire, y el hueco del dock */
.app .vista-fin{display:grid;justify-items:center;gap:22px;padding:clamp(72px,12svh,128px) 24px calc(var(--dk-libre,104px) + 28px);text-align:center;
 background:radial-gradient(60% 50% at 50% 70%,rgb(134 209 174/.08),transparent 70%),var(--onix,#0b0a0c)}
.vf-nudo{width:9px;height:9px;border-radius:50%;background:var(--rosa-hilo,#c45c7c);box-shadow:0 0 0 4px rgb(196 92 124/.14)}
.vf-a{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 4px;font:italic 400 clamp(40px,11vw,72px)/1 var(--didona,"Bodoni Moda",Georgia,serif);
 letter-spacing:-.01em;color:var(--platino-claro,#f3f2f5);text-decoration:none}
.vf-a svg{width:clamp(26px,6vw,36px);height:clamp(26px,6vw,36px);fill:none;stroke:#86d1ae;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--app-entra)}
.vf-a:focus-visible{outline:2px solid var(--rosa-hilo,#c45c7c);outline-offset:6px}
@media (hover:hover){.vf-a:hover svg{transform:translateX(5px)}}

/* Dentro de una vista, cada sección empieza bajo la barra (no bajo la de la casa) */
.app .app-vista [id]{scroll-margin-top:calc(var(--vb-alto) + 12px)}
.app .app-vista>section:first-of-type{padding-top:clamp(28px,6svh,64px)}
.app .app-vista>section.aire-casa:first-of-type .aire-marco{padding-top:clamp(24px,5svh,56px)}

/* ═════ Lo que venía del corte narrativo y se queda: el aire de cada sección, sin umbrales ni puentes ═════ */
/* La misión, a pantalla completa al abrir IA */
#mision.ia4{
 --onix:#0b0a0c;--rosa-suave:#e6b4c2;--rosa-hilo:#c45c7c;--platino-claro:#f3f2f5;--p80:rgb(243 242 245/.84);
 --didona:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;--px:max(20px,env(safe-area-inset-left,0px));
 position:relative;isolation:isolate;display:grid;align-items:center;min-height:calc(100svh - var(--vb-alto));padding:0;background:var(--onix);color:var(--platino-claro)}
.app .app-vista>#mision.ia4:first-of-type{padding-top:0}
#mision.ia4 *,#mision.ia4 *::before,#mision.ia4 *::after{box-sizing:border-box}
#mision.ia4 .ia4-mision{margin:0;min-height:calc(100svh - var(--vb-alto));display:grid;align-content:center;padding:6svh 0 10svh;box-shadow:none}
#mision.ia4 .ia4-m-arte{padding:0}
#mision.ia4 .ia4-escalera{width:min(84%,400px)}
#mision.ia4 .ia4-m-texto{margin-top:4svh;padding:0 max(24px,var(--px))}
#mision.ia4 .ia4-m-t{margin:0;font-size:clamp(40px,10.6vw,92px)}
#mision.ia4 .ia4-m-l{margin-top:22px}
@media (min-width:900px){
 #mision.ia4{--px:max(48px,env(safe-area-inset-left,0px))}
 #mision.ia4 .ia4-mision{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;border-radius:0;
  padding:8svh max(48px,calc((100vw - 1240px) / 2))}
 #mision.ia4 .ia4-m-texto{padding:0 32px 0 0;margin:0}
 #mision.ia4 .ia4-m-t{font-size:clamp(52px,5.4vw,84px)}
 #mision.ia4 .ia4-escalera{width:100%;max-width:520px}
}

/* Resolver: las seis portadas con aire; por puerta, el título */
#herramientas.rh .rh-titular{font-size:clamp(54px,14.4vw,124px)}
#herramientas.rh .rh-puertas{margin-top:clamp(48px,8svh,96px);gap:clamp(36px,6svh,56px)}
#herramientas.rh .rh-texto{padding:10px 56px 26px 20px}
#herramientas.rh .rh-l{display:none}
#herramientas.rh :is(.rh-crisis,.rh-paso) .rh-l{display:block}
#herramientas.rh .rh-paso{margin-top:clamp(40px,8svh,72px)}
#herramientas.rh .rh-principio{margin:clamp(96px,14svh,180px) 0 0;padding-inline:4px;max-width:16ch;font:400 clamp(30px,8vw,52px)/1.1 var(--didona);
 letter-spacing:-.01em;color:var(--platino-claro,#f3f2f5);text-wrap:balance}
#herramientas.rh .rh-principio em{display:block;font-style:italic;color:var(--rosa-suave,#e6b4c2)}
#herramientas.rh .rh-cierre{margin-top:28px;font-size:clamp(20px,5.4vw,28px)}
@media (min-width:640px){#herramientas.rh .rh-puertas{gap:32px}}
@media (min-width:1024px){#herramientas.rh .rh-puertas{gap:40px}}

/* Oficio: cuatro portadas; cada una abre su lección. Sin «Qué incluye» ni duraciones en la vista */
.o4-titular{font-size:clamp(50px,13.4vw,112px)}
.o4-portadas{margin-top:clamp(48px,8svh,96px);gap:clamp(72px,11svh,120px)}
.o4-pie{right:64px}
/* la puerta: toda la portada; a la vista, sólo la flecha (el texto queda para quien lee con lector de pantalla) */
.o4-acciones{height:0}
.o4-abre{display:block;width:auto;height:0;min-height:0;padding:0;overflow:visible}
.o4-abre-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.o4-abre .o4-flecha{position:absolute;right:18px;bottom:20px;z-index:2;width:24px;height:24px}
.o4-p4 .o4-abre .o4-flecha{stroke:var(--rosa-tinta,#9e2f55)}
.o4-carta:has(.o4-abre:focus-visible){outline:2px solid var(--rosa-hilo,#c45c7c);outline-offset:4px}
/* la puerta al war room: una portada más pequeña al final del oficio */
.o4-wr{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;
 margin:clamp(72px,11svh,120px) 0 0;padding:18px 60px 18px 18px;max-width:560px;text-decoration:none;color:var(--platino-claro,#f3f2f5);
 background:radial-gradient(90% 120% at 12% 50%,#2a1216,#140d10 60%,#0f0c0e);box-shadow:0 18px 44px rgb(0 0 0/.35),inset 0 0 0 1px rgb(243 242 245/.07);
 -webkit-tap-highlight-color:transparent}
.o4-wr-arte{position:relative;display:grid;gap:8px;justify-items:start;padding:12px 14px;border-radius:6px;background:#0a0809;box-shadow:inset 0 0 0 1px rgb(224 72 58/.28)}
.o4-wr-reloj{display:flex;align-items:center;gap:8px;font:500 26px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:#ff6b57;text-shadow:0 0 12px rgb(255 90 70/.45)}
.o4-wr-luz{width:7px;height:7px;border-radius:50%;background:#ff5a46;box-shadow:0 0 8px #ff5a46}
.o4-wr-riel{display:flex;gap:4px}
.o4-wr-riel i{width:9px;height:3px;border-radius:2px;background:rgb(243 242 245/.18)}
.o4-wr-riel i:nth-child(-n+3){background:#e8bf72}
.o4-wr-t{font:400 clamp(24px,6.4vw,30px)/1.06 var(--didona);letter-spacing:-.01em;text-wrap:balance}
.o4-wr-t em{display:block;font-style:italic;color:var(--rosa-suave,#e6b4c2)}
.o4-wr .o4-flecha{position:absolute;right:20px;top:50%;margin-top:-12px;width:24px;height:24px}
.o4-wr:focus-visible{outline:2px solid var(--rosa-hilo,#c45c7c);outline-offset:4px}
@media (hover:hover){.o4-wr:hover .o4-flecha{transform:translateX(4px)}}
@media (min-width:900px){
 .o4-portadas{gap:32px;margin-top:72px}
 .o4-wr{margin-top:72px;max-width:520px}
}
@media (prefers-reduced-motion:no-preference){.o4-vivo .o4-wr-luz{animation:o4-respira 2.6s ease-in-out infinite}}

/* IA: el sistema y las familias (la misión abre la vista) */
#ia.ia4 .ia4-titular{font-size:clamp(48px,12.4vw,108px)}
#ia.ia4 .ia4-sistema{margin-top:clamp(64px,10svh,112px)}
#ia.ia4 .ia4-familias{margin-top:clamp(96px,14svh,180px)}
#ia.ia4 .ia4-cuenta{display:none}
#ia.ia4 .ia4-cierre{margin-top:clamp(96px,14svh,180px)}
@media (min-width:900px){#ia.ia4 .ia4-cierre{grid-template-columns:minmax(0,1fr)}}

/* Natalia: la trayectoria tal cual, con más aire; «Así informo» y las conferencias, debajo */
#trayectoria .tr-num{display:none}
#trayectoria:not(.tr-tunel-on) .tr-hitos{gap:clamp(72px,12svh,128px)}
#trayectoria .tr-cabeza{padding-bottom:6svh}
#trayectoria .tr-estudios{margin-top:10svh;padding-bottom:10svh}

/* Hablemos: las tres conferencias en una línea */
#conversacion .cv-foro{margin:30px 0 0;font:italic 400 clamp(18px,4.8vw,22px)/1.45 var(--didona);color:rgb(243 242 245/.84)}
#conversacion .cv-foro-t em{white-space:nowrap}
#conversacion .cv-foro-k{display:block;margin-bottom:8px;font:600 10.5px/1.4 var(--sans);font-style:normal;font-stretch:118%;letter-spacing:.22em;text-transform:uppercase;color:var(--rosa-suave,#e6b4c2)}
#conversacion .cv-foro-t i{margin:0 .45em;font-style:normal;color:var(--rosa-hilo,#c45c7c)}

/* ═════ Movimiento reducido: nada se desliza; las portadas, quietas ═════ */
@media (prefers-reduced-motion:reduce){
 .app .app-vista.app-capa.app-mueve,.app .app-atras-mueve{transition:none}
 .app .app-atras{transform:none;opacity:1}
 .mn-p,.mn-obj,.vb-t,.vf-a svg,.vb-atras svg{transition:none}
 .mn-p:hover,.mn-p:active{transform:none}
}