/* ═══════════════════════════════════════════════════════════════
   /donar/ — la lámina de donación de la fundación

   Seis pantallas 16:9 de `seccion donacion.pdf`, y cada una tiene
   que entrar ENTERA en el cuadro, también en un portátil de 13".

   ── LA ESCALA POR ALTO: `--u` ─────────────────────────────────
   Dos pedidos que tiran para lados opuestos —que cada sección entre
   sin scrollear y que nada quede apretado— no se pueden cumplir con
   tamaños fijos. Todo acá —cuerpos, huecos, rellenos, altos de
   foto— se escribe como múltiplo de `--u`, que vale UN PÍXEL DE LA
   LÁMINA vista a 1366 de ancho:

     --u: min(.0732vw, calc(var(--dn-h) / 898), 1px)

   Los tres términos hacen falta:

   · `.0732vw` es 1/1366 del ancho: la escala por ancho de siempre.
   · `var(--dn-h) / 898` es la escala por alto ÚTIL. **898 y no 768**
     —el alto de la lámina— porque el reparto no es lineal: al
     achicarse, el ancho de columna NO se achica igual, así que un
     párrafo puede pasar de cuatro renglones a cinco justo en el
     límite. Los 130px de más son el colchón, y el número salió de
     barrer 240 tamaños en los dos idiomas, no de estimarlo.
   · `1px` es el tope: la página se achica con la pantalla pero **no
     se agranda**. Sin él, en un 1920x1080 `--u` daría 1.4 y las seis
     pantallas volverían a pasarse, porque el contenido crece un 40%
     y el alto disponible sólo crece lo que crece la pantalla.

   Como los huecos escalan igual que las letras, achicar para que
   entre NO vuelve a juntar las cosas.

   ── LA TIPOGRAFÍA ─────────────────────────────────────────────
   La lámina está ENTERA en Poppins: se leyeron los `/BaseFont` del
   PDF y salen Light, Regular, Medium, SemiBold y Bold, sin una sola
   línea en otra familia. Por eso acá NO se usa `--display` (Mukta),
   que es la del resto del sitio. Los pt de la lámina se pasan a
   píxeles de diseño multiplicando por 1.3327 (1366/1025):

     14pt → 18.7    25pt → 33.3    54pt → 72
     16pt → 21.3    35pt → 46.7    60pt → 80
     17pt → 22.7    35.8pt → 47.7  64pt → 85.3
     18pt → 24      45pt → 60
     20pt → 26.7

   ── DOS DESVIACIONES, las dos por reglas duras del sitio ───────
   1. El texto sobre naranja va en TINTA, no en blanco: blanco sobre
      #FD6500 da 2.98:1 y reprueba WCAG; la tinta da 7.04:1.
   2. El fondo crema de la última pantalla pasa a `--tinte`. El crema
      se fue del sitio entero en 09·2026.
   ═══════════════════════════════════════════════════════════════ */

.dn{
  --dn-h:calc(100svh - var(--header-h));
  /* El `max(.66px, …)` es un PISO, y es la regla del sitio: en
     pantallas bajas se recorta el AIRE, nunca la tipografía. Por
     debajo de ~649px de ventana la sección se estira y se scrollea
     un poco, que es preferible a leer chico. A .66 el cuerpo más
     chico de la página —el de los pilares, 14pt— queda en 12.3px. */
  --u:max(.66px, min(.0732vw, calc(var(--dn-h) / 898), 1px));
  --dn-pad-y:calc(80 * var(--u));
}

/* Las seis reparten su propio aire por dentro. El `padding-block` de
   `section` son hasta 296px invisibles, y la regla vive en otro
   archivo: no se ve mirando este. */
/* Cada sección mide una pantalla ENTERA y reserva el alto de la barra
   en su propio relleno, que es la convención del sitio. Sin eso,
   parado con el borde de la sección arriba de todo, la barra fija le
   come los primeros 68px al titular. Centrar dentro de la caja de
   contenido —o sea ya descontada la barra— deja el bloque centrado en
   lo que se VE. */
.dn > section{
  padding-block:0;
  min-height:100svh;
  padding-top:var(--header-h);
  display:grid;align-content:center;
}
.dn > section > .env{width:100%;padding-block:var(--dn-pad-y)}

/* ── Los cuatro dibujos ─────────────────────────────────────────
   Salen del PDF, no están redibujados: se renderizó cada página
   anulando `drawImage`, `fillText` y `strokeText`, así que lo único
   que queda pintado son los caminos vectoriales. Se guardan como
   MÁSCARA —el alfa es cuánto se aparta cada píxel del fondo—, no
   como imagen plana: así toman el color del texto y sirven igual
   sobre lima, sobre naranja o sobre una foto.

   La pelota de la portada es la excepción: en la lámina va sobre la
   foto, en blanco y RELLENA (las costuras son el hueco), así que su
   máscara se sacó por luminancia del render normal. */
.dn-pelota,.dn-forma-ico{
  display:block;background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.dn-pelota{
  width:1.42em;height:1.42em;flex-shrink:0;
  -webkit-mask-image:url(/assets/donar-ico-pelota.webp);
          mask-image:url(/assets/donar-ico-pelota.webp);
}
/* El alto de cada icono y su proporción son los del PDF: 89.25, 80.5
   y 84pt. No son iguales entre sí y en la lámina tampoco lo son. */
.dn-forma-ico{margin-bottom:calc(26 * var(--u))}
.dn-ico-dinero{
  height:calc(119 * var(--u));aspect-ratio:265/357;
  -webkit-mask-image:url(/assets/donar-ico-dinero.webp);
          mask-image:url(/assets/donar-ico-dinero.webp);
}
.dn-ico-servicios{
  height:calc(107 * var(--u));aspect-ratio:384/322;
  -webkit-mask-image:url(/assets/donar-ico-servicios.webp);
          mask-image:url(/assets/donar-ico-servicios.webp);
}
.dn-ico-especie{
  height:calc(112 * var(--u));aspect-ratio:306/336;
  -webkit-mask-image:url(/assets/donar-ico-especie.webp);
          mask-image:url(/assets/donar-ico-especie.webp);
}

/* ── 1 · Portada ────────────────────────────────────────────── */
.dn-hero{
  position:relative;isolation:isolate;overflow:hidden;
  /* El fondo negro no es sólo el respaldo mientras baja la foto: es
     lo que lee la barra de navegación para decidir su tema. Esa
     rutina mide la LUMINANCIA del `background-color` computado, y
     una sección transparente le sale clara, así que sin esto la
     barra blanca se dibuja encima de la foto oscura. */
  background:var(--carbon);
  color:var(--blanco);text-align:center;
}
/* El alto de la barra ya lo reserva la sección: acá no se vuelve a
   sumar o quedaría el doble. */
.dn-hero > .env{padding-block:calc(74 * var(--u)) calc(40 * var(--u))}
.dn-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;z-index:-2;
}
/* El velo no es decoración: la foto ya es oscura en el medio y clara
   en los bordes, así que la tinta blanca se cae justo donde está el
   titular más largo. */
.dn-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,10,11,.58) 0%,rgba(10,10,11,.30) 34%,rgba(10,10,11,.30) 62%,rgba(10,10,11,.66) 100%),
    rgba(10,10,11,.22);
}
.dn-hero .miga{
  position:absolute;left:0;right:0;top:calc(var(--header-h) + 22 * var(--u));
  justify-content:center;margin:0;padding-inline:var(--pad);
  color:rgba(255,255,255,.78);
}
.dn-hero .miga a{color:rgba(255,255,255,.78)}
.dn-hero .miga a:hover{color:var(--blanco)}

/* 18pt Bold */
.dn-rotulo{
  display:flex;gap:.6em;align-items:center;justify-content:center;
  font-family:var(--cuerpo);font-weight:700;
  font-size:calc(24 * var(--u));
  letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:calc(32 * var(--u));
}

/* 60pt Bold */
.dn-hero-t{
  font-family:var(--cuerpo);font-weight:700;
  font-size:calc(80 * var(--u));line-height:1.06;letter-spacing:-.018em;
  max-width:15ch;margin-inline:auto;
  text-wrap:balance;
}

.dn-hero-btns,.dn-paso-btns{
  display:flex;flex-wrap:wrap;gap:calc(20 * var(--u));justify-content:center;
  margin-top:calc(44 * var(--u));
}

/* 18pt SemiBold en la portada, 16pt SemiBold en el cierre */
.dn-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:calc(62 * var(--u));padding:.72em calc(42 * var(--u));
  border-radius:var(--radio-s);
  font-family:var(--cuerpo);font-weight:650;
  font-size:calc(24 * var(--u));
  letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta);
  transition:transform var(--t-ui) var(--sal),background-color var(--t-ui) var(--sal),box-shadow var(--t-ui) var(--sal);
}
.dn-btn-lima{background:var(--lima)}
.dn-btn-blanco{background:var(--blanco)}
@media (hover:hover) and (pointer:fine){
  .dn-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(10,10,11,.28)}
  .dn-btn-lima:hover{background:var(--lima-hover)}
  .dn-btn-blanco:hover{background:#F2F2F4}
}
.dn-btn:active{transform:translateY(0) scale(.985)}

/* 20pt Regular */
.dn-hero-p{
  margin-top:calc(38 * var(--u));
  max-width:44ch;margin-inline:auto;
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(26.7 * var(--u));line-height:1.48;
  color:rgba(255,255,255,.95);
}

/* ── Titulares de sección ───────────────────────────────────────
   No miden todos lo mismo en la lámina —45, 35, 64 y 54pt—, así que
   el tamaño lo declara cada sección y la clase sólo pone la familia
   y el peso. */
.dn-t{
  font-family:var(--cuerpo);
  font-weight:var(--dn-t-peso,700);
  font-size:calc(var(--dn-t-tam) * var(--u));
  line-height:1.12;letter-spacing:-.018em;
  max-width:22ch;
}
.dn-t-caja{text-transform:uppercase;letter-spacing:-.01em;max-width:26ch}

/* ── 2 · Cómo ser parte del cambio · titular 45pt LIGHT ────────── */
.dn-lima{
  background:var(--lima);color:var(--tinta);
  --dn-t-peso:300; --dn-t-tam:60;
}
/* 17pt Light */
.dn-cuerpo{
  margin-top:calc(20 * var(--u));
  max-width:64ch;
  font-family:var(--cuerpo);font-weight:300;
  font-size:calc(22.7 * var(--u));line-height:1.46;
  color:var(--tinta);
}

.dn-formas{
  list-style:none;margin:calc(54 * var(--u)) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(54 * var(--u));
}
/* 20pt Bold */
.dn-forma h3{
  font-family:var(--cuerpo);font-weight:700;
  font-size:calc(26.7 * var(--u));line-height:1.24;letter-spacing:-.008em;
  margin-bottom:calc(14 * var(--u));
}
/* 16pt Light */
.dn-forma p{
  font-family:var(--cuerpo);font-weight:300;
  font-size:calc(21.3 * var(--u));line-height:1.46;
}

/* ── 3 · Pilares e iniciativas · titular 35pt BOLD ────────────── */
.dn-blanco{background:var(--blanco); --dn-t-tam:46.7}
/* 16pt Regular */
.dn-sub{
  margin-top:calc(10 * var(--u));
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(21.3 * var(--u));color:var(--gris);
}

.dn-pilares{
  list-style:none;margin:calc(52 * var(--u)) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(38 * var(--u));
}
.dn-pilar{display:flex;flex-direction:column}
/* El alto de la foto va en `--u` y NO en `aspect-ratio`: la caja del
   contenido está topada en 1240 y no se achica con la pantalla, así
   que una proporción dejaría la foto en 218px fijos comiéndose el
   presupuesto de alto en un portátil. */
.dn-pilar img{
  width:100%;height:calc(178 * var(--u));object-fit:cover;
  border-radius:var(--radio-s);display:block;
  margin-bottom:calc(22 * var(--u));
}
/* 25pt Bold */
.dn-pilar h3{
  font-family:var(--cuerpo);font-weight:700;text-transform:uppercase;
  font-size:calc(33.3 * var(--u));line-height:1.12;letter-spacing:-.012em;
  margin-bottom:calc(14 * var(--u));
}
/* 14pt Regular en la lámina → 20 y no 18.7, y es la única medida que
   se aparta del PDF. Es el cuerpo más chico de la página, y a la
   escala de un portátil de 13" —`--u` en su piso de .66— 18.7 caía en
   12.3px. Con 20 queda en 13.2. El resto de la página no se mueve. */
.dn-pilar p{
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(20 * var(--u));line-height:1.48;color:var(--gris);
  margin-bottom:calc(26 * var(--u));
}
/* 16pt SemiBold */
.dn-pilar .btn{
  margin-top:auto;width:100%;justify-content:center;
  font-weight:600;font-size:calc(21.3 * var(--u));
  padding:calc(15 * var(--u)) calc(20 * var(--u));
  min-height:0;
}

/* ── 4 · Todo gran cambio · titular 35.8pt MEDIUM ─────────────── */
.dn-paso{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--carbon);
  color:var(--blanco);text-align:center;
}
.dn-paso-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;z-index:-2;
}
/* La foto del cierre es un plantel entero sobre cemento claro y
   follaje: es la más movida de las dos y el párrafo cae justo encima
   de las camisetas blancas. El velo plano no alcanzaba, así que suma
   una banda más oscura en el medio, que es donde va el texto. */
.dn-paso::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,10,11,0) 8%,rgba(10,10,11,.30) 26%,rgba(10,10,11,.30) 74%,rgba(10,10,11,0) 92%),
    rgba(10,10,11,.44);
}
.dn-paso-t{
  font-family:var(--cuerpo);font-weight:500;text-transform:uppercase;
  font-size:calc(47.7 * var(--u));line-height:1.22;letter-spacing:-.008em;
  max-width:18ch;margin-inline:auto;text-wrap:balance;
}
/* 16pt Regular */
.dn-paso-p{
  margin-top:calc(32 * var(--u));
  max-width:58ch;margin-inline:auto;
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(21.3 * var(--u));line-height:1.48;
  color:rgba(255,255,255,.95);
}
.dn-paso-btns .dn-btn{
  text-transform:none;letter-spacing:0;
  font-size:calc(21.3 * var(--u));
}

/* ── 5 · Qué logra tu aporte mensual · titular 64pt BOLD ──────── */
.dn-montos-sec{--dn-t-tam:85.3}
.dn-montos{
  list-style:none;margin:calc(56 * var(--u)) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(20 * var(--u));
}
.dn-monto{
  background:var(--naranja);color:var(--sobre-naranja);
  border-radius:var(--radio-l);
  padding:calc(26 * var(--u));
  min-height:calc(330 * var(--u));
  display:flex;flex-direction:column;justify-content:space-between;
  gap:calc(40 * var(--u));
}
/* 18pt Bold. Va en TINTA plena sobre el naranja: 7.04:1. En la
   lámina es blanca y da 2.98:1. */
.dn-monto-n{
  font-family:var(--cuerpo);font-weight:700;color:var(--tinta);
  font-size:calc(24 * var(--u));letter-spacing:-.008em;
  font-variant-numeric:tabular-nums;text-wrap:nowrap;
}
/* 16pt Regular */
.dn-monto-p{
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(21.3 * var(--u));line-height:1.42;
}

/* ── 6 · Preguntas frecuentes · titular 54pt BOLD ─────────────── */
.dn-tinte{background:var(--tinte); --dn-t-tam:72}

.dn-faq-duo{
  display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:calc(56 * var(--u));align-items:stretch;
}

/* Los tamaños del acordeón compartido, medidos contra la lámina.
   El componente vive en prode.css; acá sólo se re-declaran las
   medidas en múltiplos de --u. */
.dn .faq{margin:calc(38 * var(--u)) 0 0;gap:calc(16 * var(--u))}
/* 16pt Bold */
.dn .faq-b{
  gap:calc(18 * var(--u));
  font-size:calc(21.3 * var(--u));
  padding:calc(22 * var(--u)) calc(24 * var(--u));
}
.dn .faq-mas{width:calc(48 * var(--u));height:calc(48 * var(--u))}
.dn .faq-mas svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.dn .faq-p{padding:0 calc(24 * var(--u)) calc(24 * var(--u))}
.dn .faq-p p{font-size:calc(20 * var(--u));line-height:1.48}

.dn-qr{
  display:flex;gap:calc(26 * var(--u));align-items:center;
  margin-top:calc(40 * var(--u));
}
.dn-qr img{
  width:calc(148 * var(--u));height:auto;flex-shrink:0;
  border-radius:var(--radio-s);background:var(--blanco);padding:calc(8 * var(--u));
}
/* 16pt Regular */
.dn-qr p{
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(21.3 * var(--u));line-height:1.44;color:var(--gris);max-width:30ch;
}

.dn-transf{
  background:var(--blanco);border-radius:var(--radio-l);
  padding:calc(24 * var(--u));
  /* La tarjeta acompaña el alto de la columna de las preguntas, hasta
     el pie del QR. Lo que crece es la FOTO, que es lo único que puede
     crecer sin estirar texto ni abrir huecos entre renglones. */
  display:flex;flex-direction:column;
}
.dn-transf-fig{
  margin:0;position:relative;isolation:isolate;
  border-radius:var(--radio-m);overflow:hidden;
  flex:1 1 auto;min-height:calc(190 * var(--u));
}
.dn-transf-fig img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* 18pt Bold */
.dn-transf-fig figcaption{
  position:absolute;inset:0;z-index:1;
  display:grid;place-content:center;padding:calc(14 * var(--u));
  /* El velo plano de la lámina no alcanza: el epígrafe cruza la
     pantalla blanca del teléfono y el círculo verde, y ahí el blanco
     sobre blanco da 1:1. Medido sobre los píxeles PINTADOS, no sobre
     el color declarado. */
  background:linear-gradient(180deg,
    rgba(10,10,11,.26) 0%, rgba(10,10,11,.64) 32%,
    rgba(10,10,11,.64) 68%, rgba(10,10,11,.26) 100%);
  font-family:var(--cuerpo);font-weight:700;text-transform:uppercase;
  font-size:calc(24 * var(--u));line-height:1.16;letter-spacing:-.005em;
  color:var(--blanco);text-align:center;
}
/* 16pt Regular, y los rótulos en 16pt Bold */
.dn-transf-p{
  margin-top:calc(20 * var(--u));
  font-family:var(--cuerpo);font-weight:400;
  font-size:calc(21.3 * var(--u));line-height:1.44;color:var(--gris);
}
.dn-datos{margin:calc(18 * var(--u)) 0 0;display:grid;gap:calc(13 * var(--u))}
.dn-datos > div{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u)) calc(10 * var(--u))}
.dn-datos dt{font-family:var(--cuerpo);font-weight:700;font-size:calc(21.3 * var(--u));color:var(--tinta)}
.dn-datos dd{margin:0;font-family:var(--cuerpo);font-weight:400;font-size:calc(21.3 * var(--u));color:var(--gris);font-variant-numeric:tabular-nums}

/* ── Angosto ─────────────────────────────────────────────────────
   Abajo de 900px la maqueta se reordena en una columna: el alto deja
   de ser el límite —ninguna sección entra en una pantalla de
   teléfono y forzarlo sería ilegible— y la proporción del 1366x768
   ya no sirve. `--u` se queda sólo para los huecos, con piso y
   techo, y cada cuerpo vuelve a su `clamp` en píxeles. */
@media (max-width:900px){
  .dn{--u:clamp(.62px, .22vw + .34px, 1px); --dn-pad-y:clamp(76px,12vw,112px)}
  .dn > section{min-height:0;display:block;padding-top:0}
  .dn-hero,.dn-paso{min-height:100svh;display:grid;align-content:center;padding-top:var(--header-h)}
  .dn-hero > .env{padding-block:clamp(84px,14vh,130px) clamp(40px,8vh,80px)}

  .dn-formas,.dn-pilares{grid-template-columns:minmax(0,1fr);gap:clamp(34px,8vw,54px)}
  .dn-montos{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
  .dn-faq-duo{grid-template-columns:minmax(0,1fr);gap:clamp(30px,7vw,48px)}
  .dn-transf{order:-1}

  .dn-hero .miga{font-size:12.5px}
  .dn-rotulo{font-size:13px}
  .dn-hero-t{font-size:clamp(34px,8.6vw,54px)}
  .dn-btn{font-size:15px;min-height:52px;padding:14px 26px}
  .dn-hero-p{font-size:clamp(15px,4vw,18px)}
  .dn-t{font-size:clamp(28px,7.4vw,44px)}
  .dn-cuerpo,.dn-forma p,.dn-sub,.dn-paso-p,.dn-monto-p,
  .dn-qr p,.dn-transf-p,.dn-datos dt,.dn-datos dd{font-size:clamp(15px,3.9vw,17px)}
  .dn-forma h3{font-size:clamp(18px,4.8vw,21px)}
  .dn-forma-ico{margin-bottom:18px}
  .dn-ico-dinero{height:78px} .dn-ico-servicios{height:70px} .dn-ico-especie{height:73px}
  .dn-pilar img{height:clamp(180px,48vw,240px)}
  .dn-pilar h3{font-size:clamp(22px,6vw,28px)}
  .dn-pilar p{font-size:clamp(15px,3.9vw,17px)}
  .dn-pilar .btn{font-size:15px;padding:14px 20px}
  .dn-paso-t{font-size:clamp(24px,6.4vw,34px)}
  .dn-paso-btns .dn-btn{font-size:15px}
  .dn-monto{min-height:0;padding:22px;gap:clamp(26px,7vw,44px)}
  .dn-monto-n{font-size:16px}
  .dn .faq-b{font-size:14px;padding:20px;gap:14px}
  .dn .faq-mas{width:42px;height:42px}
  .dn .faq-mas svg{width:17px;height:17px}
  .dn .faq-p p{font-size:clamp(14.5px,3.8vw,16.5px)}
  .dn .faq-p{padding:0 20px 20px}
  .dn-qr img{width:124px;padding:8px}
  .dn-transf{padding:20px}
  .dn-transf-fig img{height:clamp(170px,44vw,220px)}
  .dn-transf-fig figcaption{font-size:clamp(17px,4.6vw,22px)}
}
@media (max-width:900px){
  /* Los dos de la portada van AL LADO y del mismo tamaño, como el
     resto de los pares del sitio. Los tres del cierre no: tres
     columnas en 350px dejan 108px por botón. */
  .dn-hero-btns{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:10px}
  .dn-hero-btns .dn-btn{
    width:100%;height:auto;min-height:52px;
    white-space:normal;text-align:center;line-height:1.24;padding:12px 10px;
  }
}
@media (max-width:560px){
  .dn-qr{flex-direction:column;align-items:flex-start;text-align:left}
  .dn-paso-btns .dn-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .dn-btn,.dn .faq-mas{transition-duration:.01ms}
  .dn-btn:hover{transform:none}
}