/* =========================================================
   Moléculas, S. A. — Sitio institucional
   Sistema visual: "la ruta" (nodos, enlaces y codo de 45°)
   ========================================================= */

:root{
  /* Color */
  --navy:#142E4F;
  --navy-deep:#0C1D33;
  --steel:#1E4270;
  --flame:#E14C22;
  --ember:#B93B18;
  --flame-light:#F2703F;
  --slate:#7B8591;
  --ink-2:#4F5B69;
  --white:#FFFFFF;
  --cool:#F4F6F8;
  --hair:#DDE3E9;

  /* Tipografía */
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Escala 1.25 */
  --t-xs:.875rem;
  --t-s:1rem;
  --t-b:1.0625rem;
  --t-m:1.25rem;
  --t-l:1.5625rem;
  --t-xl:1.9375rem;
  --t-2xl:2.4375rem;
  --t-3xl:3.0625rem;
  --t-4xl:3.8125rem;

  /* Ritmo */
  --gutter:clamp(20px,5vw,64px);
  --measure:68ch;
  --cut:clamp(56px,7vw,116px);
  --card-cut:28px;
  --pad-band:clamp(72px,10vw,130px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:var(--sans);
  font-size:var(--t-b);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.25rem,6vw,var(--t-4xl))}
h2{font-size:clamp(1.9375rem,4.6vw,var(--t-3xl))}
h3{font-size:var(--t-m);font-family:var(--sans);font-weight:600;letter-spacing:0;line-height:1.35}
p{margin:0 0 1.1em;max-width:var(--measure)}
a{color:inherit}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}

::selection{background:var(--flame);color:#fff}

:focus-visible{outline:3px solid var(--flame);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--flame);color:#fff;padding:14px 20px;font-weight:600}
.skip:focus{left:0}

.shell{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------
   Marca
   --------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand__mark{height:38px;width:auto;flex:none}
.brand__name{font-family:var(--sans);font-weight:600;font-size:var(--t-s);letter-spacing:.06em;line-height:1.1;white-space:nowrap}

/* ---------------------------------------------------------
   Encabezado
   --------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:60;color:var(--white);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
.header.is-stuck{background:var(--navy-deep);border-bottom-color:var(--steel)}
.header__inner{display:flex;align-items:center;gap:24px;min-height:76px}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav__link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:var(--t-s);text-decoration:none;color:rgba(255,255,255,.82);
  position:relative;transition:color .2s ease;
}
.nav__link:hover{color:var(--flame-light)}
.nav__link[aria-current="true"]{color:#fff}
.nav__link[aria-current="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:16px;height:2px;background:var(--flame)}

.tools{display:flex;align-items:center;gap:14px;margin-left:10px}

/* Sin recuadro: solo las dos siglas separadas por una barra. El idioma
   activo se distingue por color de marca y peso, no por un fondo sólido. */
.lang{display:flex;align-items:center;gap:2px}
.lang__btn{
  appearance:none;background:none;border:0;color:rgba(255,255,255,.55);
  font:inherit;font-size:var(--t-xs);font-weight:500;letter-spacing:.06em;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 6px;min-height:44px;cursor:pointer;
  transition:color .2s ease;
}
.lang__btn:hover{color:#fff}
.lang__btn[aria-pressed="true"]{color:var(--flame-light);font-weight:700}
.lang__sep{color:rgba(255,255,255,.3);font-size:var(--t-xs);line-height:1;user-select:none}
.lang__sep::before{content:"/"}

.burger{display:none;appearance:none;background:none;border:1px solid rgba(255,255,255,.28);width:46px;height:38px;cursor:pointer;color:#fff}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;margin:4px auto;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------------------------------------------------------
   Botones
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;
  font-family:var(--sans);font-size:1.125rem;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn--flame{background:var(--flame);color:#fff}
.btn--flame:hover{background:var(--ember)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn--sm{min-height:44px;padding:0 18px;font-size:var(--t-s)}
.btn__mark{width:19px;height:19px;flex:none}

/* ---------------------------------------------------------
   El riel
   --------------------------------------------------------- */
.rail{position:fixed;left:40px;top:50%;transform:translateY(-50%);z-index:50;display:none;color:var(--navy)}
.rail::before{content:"";position:absolute;left:5px;top:22px;bottom:22px;width:1px;background:currentColor;opacity:.3}
.rail.is-on-dark{color:#fff}
.rail__link{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none;color:currentColor}
.rail__node{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;flex:none;background:currentColor;opacity:.32;transition:opacity .25s ease,background-color .25s ease,transform .25s ease}
.rail__label{font-size:var(--t-xs);opacity:.7;transition:opacity .25s ease;white-space:nowrap}
.rail__link:hover .rail__node,.rail__link:hover .rail__label{opacity:.95}
.rail__link[aria-current="true"] .rail__node{background:var(--flame);opacity:1;transform:scale(1.3)}
.rail__link[aria-current="true"] .rail__label{opacity:1;font-weight:600}
/* Desde 1240 px el riel ya cabe, pero solo como nodos: la etiqueta
   saldría encima del texto. Aparece al pasar el cursor o al enfocar. */
@media (min-width:1240px){.rail{display:block}}
@media (min-width:1240px) and (max-width:1499px){
  .rail__link{position:relative;gap:0}
  .rail__label{
    position:absolute;left:24px;white-space:nowrap;
    padding:5px 11px;background:var(--navy);color:#fff;
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
  }
  .rail.is-on-dark .rail__label{background:#fff;color:var(--navy)}
  .rail__link:hover .rail__label,
  .rail__link:focus-visible .rail__label{opacity:1;visibility:visible}
}

/* ---------------------------------------------------------
   Franjas y codos de 45°
   --------------------------------------------------------- */
.band{position:relative;padding-block:var(--pad-band)}
.band--light{background:var(--white)}
.band--cool{background:var(--cool)}
.band--navy{background:var(--navy);color:#fff}
.band--deep{background:var(--navy-deep);color:#fff}

.band--cut-tl{
  clip-path:polygon(0 var(--cut),var(--cut) 0,100% 0,100% 100%,0 100%);
  margin-top:calc(var(--cut) * -1);
  padding-top:calc(var(--pad-band) + var(--cut));
  z-index:1;
}
.band--cut-br{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  padding-bottom:calc(var(--pad-band) + var(--cut) * .4);
}

/* La franja con corte sube var(--cut) y tapa el final de la anterior. Sin
   compensar, esa sección queda con todo el aire arriba y casi nada abajo. */
.band:has(+ .band--cut-tl){padding-bottom:calc(var(--pad-band) + var(--cut))}

.band--navy h2,.band--deep h2{color:#fff}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--t-xs);font-weight:500;color:var(--ink-2);margin:0 0 18px}
.band--navy .eyebrow,.band--deep .eyebrow,.hero .eyebrow{color:rgba(255,255,255,.72)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--flame);flex:none}
.eyebrow .tick{width:1px;height:14px;background:currentColor;opacity:.45;display:inline-block}

.section-head{margin-bottom:clamp(36px,5vw,58px)}
.section-head h2{max-width:17ch}
.section-head .rule{display:block;width:64px;height:3px;background:var(--flame);margin-top:22px}
.lead{font-size:var(--t-m);line-height:1.55;color:var(--ink-2);max-width:56ch}
.band--navy .lead,.band--deep .lead{color:rgba(255,255,255,.8)}

/* ---------------------------------------------------------
   Inicio (hero)
   --------------------------------------------------------- */
.hero{
  position:relative;background:var(--navy-deep);color:#fff;
  padding-top:clamp(124px,16vw,180px);padding-bottom:clamp(76px,10vw,124px);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(135deg,transparent calc(50% - .5px),rgba(255,255,255,.06) 50%,transparent calc(50% + .5px)) 0 0/170px 170px,
    linear-gradient(45deg,transparent calc(50% - .5px),rgba(255,255,255,.035) 50%,transparent calc(50% + .5px)) 0 0/170px 170px;
  -webkit-mask-image:radial-gradient(120% 95% at 80% 38%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 95% at 80% 38%,#000 0%,transparent 70%);
}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(44px,6vw,72px);align-items:center}
@media (min-width:980px){.hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero h1{margin-bottom:26px}
/* Naranja de marca sólido (--flame), el mismo de los botones y las barras
   del sitio, no la variante aclarada que se usa en texto pequeño. A este
   tamaño el título es "texto grande" por WCAG (min. 3:1) y da 4,24:1;
   --flame-light habría sido más seguro (5,78:1) pero no es el color que
   pidió, y aquí el tamaño de letra ya cubre la diferencia de contraste.
   Selección propia porque el resaltado naranja del sitio (::selection)
   dejaría el texto invisible sobre su propio color al seleccionarlo. */
.hero__title-accent{color:var(--flame)}
.hero__title-accent::selection{background:#fff;color:var(--navy-deep)}
/* La barra ya era naranja antes de este cambio y queda debajo del párrafo
   completo, no pegada a la última línea del título: a 26px de distancia no
   se lee como el subrayado de "…lo necesita." */
.hero__rule{width:92px;height:3px;background:var(--flame);margin:0 0 26px}
.hero__lead{font-size:var(--t-m);line-height:1.55;color:rgba(255,255,255,.8);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.route{
  background:rgba(255,255,255,.045);border:1px solid var(--steel);
  padding:clamp(24px,3vw,34px);
  clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);
}
.route__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px}
.route__title{font-family:var(--sans);font-size:var(--t-s);font-weight:600;letter-spacing:.03em}
.route__tag{font-size:var(--t-xs);color:var(--flame-light);font-weight:600}
.route__diagram{width:100%;max-width:470px;height:auto;margin-inline:auto}
.route__stops{margin:20px 0 0;display:grid;gap:14px}
.route__stop{display:flex;gap:14px;align-items:flex-start;font-size:var(--t-s)}
/* Los puntos de la leyenda repiten los marcadores del diagrama: el origen es
   un anillo blanco sobre el fondo del panel; el destino, un disco naranja con
   su aro exterior. El aro va en un pseudoelemento para no ocupar espacio. */
.route__dot{position:relative;width:14px;height:14px;border-radius:50%;margin-top:6px;flex:none;
  background:var(--navy-deep);border:2px solid #fff}
.route__stop--end .route__dot{background:var(--flame);border-color:var(--flame)}
.route__stop--end .route__dot::after{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid var(--flame);opacity:.45;
}
.route__stop b{display:block;font-weight:600;color:#fff}
.route__stop span{color:rgba(255,255,255,.66)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{font-size:var(--t-xs);font-weight:500;padding:7px 13px;border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.88)}
.route__note{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--steel);font-size:var(--t-xs);color:rgba(255,255,255,.6);max-width:none}

.route__path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.route.is-drawn .route__path{animation:draw 5.2s cubic-bezier(.65,.02,.32,1) .3s infinite}
.route__end{opacity:0}
.route.is-drawn .route__end{animation:ignite 5.2s ease .3s infinite}
/* El trazo se dibuja, se sostiene y sale hacia el destino; luego reinicia. */
@keyframes draw{
  0%{stroke-dashoffset:var(--len)}
  26%,62%{stroke-dashoffset:0}
  88%,100%{stroke-dashoffset:calc(var(--len) * -1)}
}
@keyframes ignite{
  0%,24%{opacity:0}
  32%,62%{opacity:1}
  76%,100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .route__path{stroke-dashoffset:0}
  .route__end{opacity:1}
  .route.is-drawn .route__path,.route.is-drawn .route__end{animation:none}
}

/* ---------------------------------------------------------
   Quiénes somos
   --------------------------------------------------------- */
.about{display:grid;gap:clamp(34px,5vw,64px)}
@media (min-width:900px){.about{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.statement{display:grid;gap:30px}
.statement__item{padding-left:24px;border-left:2px solid var(--flame)}
.statement__item h3{margin-bottom:8px}
.statement__item p{margin:0;color:var(--ink-2)}

.values{display:grid;margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--hair)}
@media (min-width:760px){.values{grid-template-columns:repeat(3,1fr)}}
.values__item{padding:26px 0;border-bottom:1px solid var(--hair)}
@media (min-width:760px){
  .values__item{padding:30px 32px 34px;border-bottom:0;border-right:1px solid var(--hair)}
  .values__item:first-child{padding-left:0}
  .values__item:last-child{border-right:0;padding-right:0}
}
.values__item h3{margin-bottom:8px;display:flex;align-items:center;gap:10px}
.values__item h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--navy);flex:none}
.values__item:nth-child(2) h3::before{background:var(--slate)}
.values__item:last-child h3::before{background:var(--flame)}
.values__item p{margin:0;color:var(--ink-2);font-size:var(--t-s)}

/* ---------------------------------------------------------
   Productos
   --------------------------------------------------------- */
.products{display:grid;gap:22px}
@media (min-width:820px){.products{grid-template-columns:repeat(3,1fr)}}
.product{
  background:#fff;color:var(--navy);padding:clamp(26px,3vw,34px);
  display:flex;flex-direction:column;min-height:280px;
  clip-path:polygon(0 0,calc(100% - var(--card-cut)) 0,100% var(--card-cut),100% 100%,0 100%);
}
.product__tag{font-size:var(--t-xs);font-weight:600;color:var(--ember);margin-bottom:14px}
.product h3{font-family:var(--display);font-weight:500;font-size:var(--t-l);letter-spacing:-.01em;margin-bottom:12px}
.product p{color:var(--ink-2);font-size:var(--t-s);margin-bottom:0}
.product__note{margin-top:auto;padding-top:20px;font-size:var(--t-xs);color:var(--ink-2);display:flex;align-items:center;gap:9px}
.product__note::before{content:"";width:16px;height:1px;background:var(--flame);flex:none}

.delivery{margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--steel);display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}
.delivery b{font-weight:600;color:#fff;font-size:var(--t-s)}
.delivery span{color:rgba(255,255,255,.72);font-size:var(--t-s)}

/* Alianzas estratégicas: antes era su propia sección; ahora vive dentro de
   Productos, cerrando la grilla. El antetítulo va como cualquier otro de la
   página (mismo estilo, mismo contraste ya validado). El título entra en una
   cuña naranja de 45° —el mismo lenguaje de corte que separa las secciones—
   en navy-deep, no blanco: a este tamaño de letra el blanco da 3,99:1 sobre
   el naranja, por debajo del mínimo de 4,5:1; navy-deep da 4,24:1, que
   alcanza porque el título es "texto grande" según WCAG (mínimo 3:1). El
   párrafo completo queda fuera de la cuña, en el mismo blanco translúcido
   que ya usa el resto del texto sobre este fondo (8,91:1, sin compromisos). */
.allies{margin-top:clamp(40px,5vw,60px)}
.allies > .eyebrow{margin-bottom:20px}
.allies__row{display:grid;gap:20px;align-items:center}
@media (min-width:700px){.allies__row{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,40px)}}
.allies__wedge{
  background:var(--flame);color:var(--navy-deep);
  font-family:var(--sans);font-weight:700;font-size:var(--t-m);line-height:1.3;
  margin:0;padding:16px clamp(30px,4vw,44px) 16px 20px;max-width:22ch;
  clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);
}
.allies__body{margin:0;color:rgba(255,255,255,.78);font-size:var(--t-s);line-height:1.6;max-width:52ch}

/* ---------------------------------------------------------
   Noticias
   --------------------------------------------------------- */
.news{display:grid;gap:22px}
@media (min-width:820px){.news{grid-template-columns:repeat(3,1fr)}}
.news__item{
  background:var(--cool);padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;gap:12px;min-height:220px;
  clip-path:polygon(0 0,calc(100% - var(--card-cut)) 0,100% var(--card-cut),100% 100%,0 100%);
}
.news__date{font-size:var(--t-xs);color:var(--ink-2);font-weight:500}
.news__item h3{font-family:var(--display);font-weight:500;font-size:var(--t-m);color:var(--navy)}
.news__item p{margin:0;font-size:var(--t-s);color:var(--ink-2)}

/* ---------------------------------------------------------
   Contacto
   --------------------------------------------------------- */
.contact{display:grid;gap:clamp(34px,5vw,60px)}
@media (min-width:920px){.contact{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.channels{display:grid;margin-top:30px;border-top:1px solid var(--steel)}
.channel{display:flex;flex-wrap:wrap;gap:2px 16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--steel)}
/* La etiqueta del canal es un ícono; el texto queda para lectores de pantalla. */
.channel__label{flex:0 0 auto;display:flex;align-items:center;color:rgba(255,255,255,.6)}
.channel__icon{width:22px;height:22px;display:block}
.channel > dd{flex:1 1 200px;margin:0}
.channel__value{font-size:var(--t-m);color:#fff;text-decoration:none;font-weight:500}
a.channel__value:hover{color:var(--flame)}
.contact .btn{margin-top:32px}

.map{border:1px solid var(--steel);background:var(--navy);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%)}
.map iframe{width:100%;height:clamp(300px,42vw,430px);border:0;display:block;filter:grayscale(.2)}
.map__caption{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;padding:18px 22px;border-top:1px solid var(--steel);font-size:var(--t-xs)}
.map__caption b{font-weight:600;color:#fff;font-size:var(--t-s)}
.map__caption span{color:rgba(255,255,255,.66)}

/* ---------------------------------------------------------
   Pie de página
   --------------------------------------------------------- */
.footer{background:var(--navy-deep);color:#fff;padding-block:clamp(32px,4.5vw,52px);border-top:1px solid var(--steel)}
/* Marca y enlaces apilados y centrados sobre el eje de la página; el aviso
   legal cierra debajo de la línea divisoria, también centrado. */
.footer__top{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.footer .brand{display:inline-flex}
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px}
.footer__nav a{font-size:var(--t-s);color:rgba(255,255,255,.75);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;transition:color .2s ease}
.footer__nav a:hover{color:var(--flame-light)}
/* max-width:none anula la medida de lectura que la regla global impone a <p>
   y que dejaba la línea divisoria cortada a media página. Los 44px mínimos
   de los enlaces de arriba ya son el objetivo táctil: aquí no hace falta
   tanto aire como en el resto del sitio, que separa secciones completas. */
.footer__legal{
  margin:18px 0 0;max-width:none;padding-top:14px;border-top:1px solid var(--steel);
  font-size:var(--t-xs);color:rgba(255,255,255,.55);text-align:center;
}

/* En pantalla angosta los enlaces no caben en una sola fila centrada: se
   apilan uno por línea para no forzar el tamaño de letra ni desbordar. */
@media (max-width:479px){
  .footer__nav{flex-direction:column;gap:0}
}

/* ---------------------------------------------------------
   Móvil
   --------------------------------------------------------- */
@media (max-width:1079px){
  .header__inner{gap:10px}
  .burger{display:block;order:2;margin-left:2px;width:44px}
  /* order y margin-right:auto son del truco de layout del encabezado (dejan
     sitio al botón de menú): se restringen a .header para no desplazar
     también la marca del pie, que en móvil debe seguir centrada. */
  .header .brand{order:0;margin-right:auto;gap:9px}
  .brand__mark{height:32px}
  .brand__name{font-size:.8125rem;letter-spacing:.04em}
  .lang__btn{padding:0 4px}
  .nav{
    position:fixed;inset:76px 0 auto 0;background:var(--navy-deep);
    border-bottom:1px solid var(--steel);flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:8px var(--gutter) 24px;display:none;
  }
  .nav.is-open{display:flex}
  .nav__link{min-height:54px;padding:0;font-size:var(--t-m);border-bottom:1px solid rgba(255,255,255,.1)}
  .nav__link[aria-current="true"]::after{left:0;right:auto;width:22px;bottom:12px}
  .tools{order:1;margin-left:0}
  .tools .btn{display:none}
  .nav .btn{display:inline-flex;margin-top:20px;justify-content:center}
}
@media (min-width:1080px){.nav .btn{display:none}}
@media (min-width:1080px) and (max-width:1279px){.tools .btn{display:none}}