/* =========================================================
   SAG · Strategical Advance Group — hoja de estilos única
   v2 · cabecera clara, tipografía Archivo/Barlow, fotografía
   ========================================================= */

:root{
  /* fondos oscuros */
  --navy-950:#041020; --navy-900:#071c33; --navy:#0a2a55;
  /* acentos, tomados del swoosh del logo */
  --blue:#0a5fb4; --blue-600:#0b6ac9; --sky:#4e9be0; --sky-200:#a8cef0;
  /* neutros con sesgo azul: elegidos, no heredados */
  --paper:#f2f5f8; --paper-2:#e7edf3; --line:#d7e0ea; --line-dark:rgba(255,255,255,.14);
  --ink:#0b1826; --ink-70:#3c4f61; --ink-50:#64768a; --steel:#8ea4bf;
  --ff-d:'Archivo','Arial Narrow',system-ui,sans-serif;
  --ff-b:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,72px);
  --max:1280px;
  --shadow:0 24px 60px -28px rgba(4,16,32,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-b);font-size:16.5px;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;line-height:1.62}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3,h4{margin:0;font-family:var(--ff-d);font-weight:800;line-height:1.04;
  letter-spacing:-.015em;text-transform:uppercase;font-stretch:108%;text-wrap:balance}
h2{font-size:clamp(29px,3.6vw,48px)}
h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.005em}
h4{font-size:17px;font-stretch:104%}
p{margin:0}
strong{font-weight:600;color:var(--ink)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:var(--navy);padding:10px 16px}

.eyebrow{font-family:var(--ff-b);font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:13px}
.eyebrow::before{content:"";width:36px;height:2px;background:currentColor;flex:none}
.on-dark .eyebrow,.bg-navy .eyebrow{color:var(--sky)}
.lead{font-size:clamp(16.5px,1.2vw,18.5px);color:var(--ink-70);max-width:64ch}
.bg-navy .lead{color:#a9bfd6}

/* ------------------------------------------------ barra de utilidades */
.util{background:var(--navy-950);color:#93a9c2;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.util a:hover{color:#fff}
.util-l{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.dot{width:7px;height:7px;border-radius:50%;background:#3ad48c;box-shadow:0 0 0 3px rgba(58,212,140,.18);display:inline-block}
.lang{display:flex;border:1px solid rgba(255,255,255,.2);border-radius:2px;overflow:hidden;font-size:12px}
.lang span{padding:3px 10px;font-weight:600;letter-spacing:.08em}
.lang .on{background:var(--blue);color:#fff}
.lang .off{opacity:.45}

/* ------------------------------------------------ cabecera clara */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);min-height:82px;flex-wrap:nowrap}
header.site .btn{padding:13px 18px;font-size:12.5px}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:44px;width:auto}
.brand .lock{border-left:1px solid var(--line);padding-left:14px;line-height:1.25}
.brand .lock b{display:block;font-family:var(--ff-d);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navy);white-space:nowrap}
.brand .lock span{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--blue)}
section[id],div[id]{scroll-margin-top:100px}

nav.main{margin-left:auto;display:flex;gap:clamp(16px,1.6vw,26px);align-items:center}
nav.main>div{position:relative}
nav.main a.top{white-space:nowrap;color:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 0;border-bottom:2px solid transparent;transition:.18s;
  display:inline-flex;align-items:center;gap:7px}
nav.main a.top:hover,nav.main a.top.active{color:var(--blue);border-color:var(--blue)}
nav.main a.top svg{opacity:.55}
.drop{position:absolute;top:100%;left:-18px;min-width:300px;background:#fff;border:1px solid var(--line);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;box-shadow:var(--shadow)}
nav.main>div:hover .drop,nav.main>div:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:12px 15px;font-size:14.5px;border-left:2px solid transparent;color:var(--ink)}
.drop a:hover{background:var(--paper);color:var(--blue);border-color:var(--blue)}
.drop a small{display:block;font-size:12.5px;color:var(--ink-50);margin-top:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  font-family:var(--ff-b);font-size:13.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 24px;border:1.5px solid transparent;transition:.2s;cursor:pointer}
.btn::after{content:"";width:7px;height:7px;background:currentColor;flex:none}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue-600)}
.btn-o{border-color:rgba(255,255,255,.4);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-d{border-color:var(--navy);color:var(--navy)}
.btn-d:hover{background:var(--navy);color:#fff}
.burger{display:none;margin-left:auto;flex:none;background:none;border:1px solid var(--line);
  color:var(--navy);padding:10px 12px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--navy);margin:4px 0}

/* ------------------------------------------------ hero partido */
.hero{background:var(--navy-950);color:#fff;position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1fr 42%;min-height:min(78vh,720px)}
.hero .txt{padding:clamp(44px,5.5vw,84px) 0 clamp(38px,4vw,60px) var(--pad);
  max-width:calc(var(--max) * .58);margin-left:max(0px,calc((100vw - var(--max))/2));
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.hero h1{font-size:clamp(36px,5.4vw,70px);max-width:19ch;margin:20px 0 0;font-stretch:112%}
.hero h1 em{font-style:normal;color:var(--sky)}
.hero .sub{margin-top:22px;max-width:52ch;font-size:clamp(16.5px,1.25vw,19px);color:#c2d3e5}
.hero .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .shot{position:relative}
.hero .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,var(--navy-950) 0%,rgba(4,16,32,.55) 26%,rgba(4,16,32,.12) 65%,rgba(4,16,32,.3) 100%)}

/* cifras del hero */
.facts{border-top:1px solid var(--line-dark);background:var(--navy-950);position:relative;z-index:3}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px);padding-top:30px;padding-bottom:34px}
.facts .f b{display:block;font-family:var(--ff-d);font-size:clamp(30px,3.4vw,44px);font-weight:800;
  color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.facts .f b i{font-style:normal;color:var(--sky)}
.facts .f span{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel)}
.facts .f p{margin-top:8px;font-size:14px;color:#8fa6bf;max-width:32ch}

/* ------------------------------------------------ hero de página interna */
.phero{position:relative;background:var(--navy-950);color:#fff;overflow:hidden;
  padding:clamp(44px,5vw,72px) 0 clamp(44px,5vw,66px)}
.phero .bgimg{position:absolute;inset:0}
.phero .bgimg img{width:100%;height:100%;object-fit:cover}
.phero .bgimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(4,16,32,.96) 0%,rgba(4,16,32,.88) 46%,rgba(4,16,32,.5) 100%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(31px,4.4vw,56px);max-width:22ch;margin:18px 0 0;font-stretch:110%}
.phero .sub{margin-top:20px;max-width:62ch;font-size:clamp(16.5px,1.15vw,18.5px);color:#c2d3e5}
.phero .cta{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
.crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--steel);flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.crumbs i{opacity:.45;font-style:normal}

/* ------------------------------------------------ secciones */
section{padding:clamp(58px,7vw,108px) 0}
section.tight{padding:clamp(42px,5vw,74px) 0}
.bg-paper{background:var(--paper)}
.bg-navy{background:var(--navy-950);color:#fff}
.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.sec-head{max-width:780px}
.sec-head h2{margin-top:18px}
.sec-head .lead{margin-top:20px}

/* ------------------------------------------------ tres soluciones */
.sols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(36px,4vw,56px)}
.sol{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:.24s;overflow:hidden}
.bg-paper .sol{background:#fff}
.sol:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--sky-200)}
.sol .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-900)}
.sol .shot img{width:100%;height:100%;object-fit:cover;transition:.5s}
.sol:hover .shot img{transform:scale(1.04)}
.sol .shot .no{position:absolute;top:0;left:0;background:var(--navy-950);color:#fff;font-family:var(--ff-d);
  font-weight:800;font-size:13px;letter-spacing:.12em;padding:8px 13px}
.sol .in{padding:26px clamp(20px,2vw,28px) 30px;display:flex;flex-direction:column;flex:1}
.sol h3{color:var(--navy)}
.sol ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.sol li{position:relative;padding-left:22px;font-size:15.5px;color:var(--ink-70)}
.sol li::before{content:"+";position:absolute;left:0;top:-1px;color:var(--blue);font-weight:600}
.sol .more{margin-top:auto;padding-top:24px;font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:9px}
.sol:hover .more{color:var(--blue)}
.sol:hover .more svg{transform:translateX(5px)}
.sol .more svg{transition:.22s}

/* ------------------------------------------------ proceso */
.flow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(38px,4.5vw,62px);
  border-top:1px solid var(--line-dark)}
.bg-paper .flow,.on-light.flow{border-top-color:var(--line)}
.flow .st{padding:32px 28px 0 0;position:relative}
.flow .st::before{content:"";position:absolute;top:-5px;left:0;width:10px;height:10px;background:var(--sky)}
.flow.on-light .st::before{background:var(--blue)}
.flow .num{font-family:var(--ff-d);font-weight:800;font-size:13px;letter-spacing:.16em;color:var(--sky);
  font-variant-numeric:tabular-nums}
.flow.on-light .num{color:var(--blue)}
.flow h4{margin-top:15px;color:#fff}
.flow.on-light h4{color:var(--navy)}
.flow p{margin-top:11px;font-size:15px;color:#a3b8d0;max-width:30ch}
.flow.on-light p{color:var(--ink-70)}

/* ------------------------------------------------ misión y visión */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);margin-top:clamp(34px,4vw,52px)}
.bg-paper .mv{background:var(--line)}
.mv .c{background:var(--navy-950);padding:clamp(28px,3vw,40px)}
.bg-paper .mv .c{background:#fff}
.mv .n{font-family:var(--ff-d);font-weight:800;font-size:13px;letter-spacing:.16em;color:var(--sky);margin-bottom:16px}
.bg-paper .mv .n{color:var(--blue)}
.mv h3{font-size:clamp(21px,2vw,27px)}
.mv p{margin-top:16px;font-size:16px;color:#a9bfd6}
.bg-paper .mv p{color:var(--ink-70)}

/* ------------------------------------------------ sectores */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(34px,4vw,52px)}
.sct{position:relative;overflow:hidden;background:var(--navy-900);min-height:250px;display:flex;
  align-items:flex-end;transition:.24s}
.sct img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s}
.sct:hover img{transform:scale(1.05)}
.sct::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,16,32,.15) 0%,rgba(4,16,32,.55) 45%,rgba(4,16,32,.95) 100%)}
.sct .in{position:relative;z-index:2;padding:24px}
.sct .no{font-family:var(--ff-d);font-weight:800;font-size:12px;letter-spacing:.18em;color:var(--sky)}
.sct h4{margin-top:10px;color:#fff;font-size:18px}
.sct p{margin-top:9px;font-size:14.5px;color:#b9cbde;max-width:30ch}

/* ------------------------------------------------ rejilla de razones */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:clamp(34px,4vw,52px)}
.why .w{background:#fff;padding:32px 28px 36px}
.why .n{font-family:var(--ff-d);font-weight:800;font-size:12.5px;letter-spacing:.18em;color:var(--blue);margin-bottom:16px}
.why h4{color:var(--navy)}
.why p{margin-top:12px;font-size:15.5px;color:var(--ink-70)}

/* ------------------------------------------------ bloque de servicios */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:clamp(32px,4vw,48px)}
.svc .s{background:#fff;padding:28px 28px 32px}
.svc .s .tag{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:13px}
.svc .s h4{color:var(--navy)}
.svc .s p{margin-top:11px;font-size:15.5px;color:var(--ink-70)}

.checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.checks li{position:relative;padding-left:32px;font-size:16px;color:var(--ink-70)}
.checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border:1.5px solid var(--blue);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5fb4' stroke-width='3'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/12px no-repeat}
.bg-navy .checks li{color:#b9cbde}
.bg-navy .checks li::before{border-color:var(--sky);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e9be0' stroke-width='3'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}

/* ------------------------------------------------ dos columnas */
.two{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,76px);align-items:start;margin-top:clamp(34px,4vw,54px)}
.two.narrow{grid-template-columns:1.3fr .7fr}
.two .body p{color:var(--ink-70);font-size:16.5px}
.bg-navy .two .body p{color:#a9bfd6}
.two .body p+p{margin-top:17px}
.claim{font-family:var(--ff-d);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.9vw,36px);
  line-height:1.06;color:var(--navy);font-stretch:108%}
.bg-navy .claim{color:#fff}
.qa .item{padding:22px 0 22px 24px;border-left:2px solid var(--line);transition:.2s}
.qa .item:hover{border-color:var(--blue)}
.bg-navy .qa .item{border-left-color:var(--line-dark)}
.qa h4{color:var(--navy);font-size:15px}
.bg-navy .qa h4{color:#fff}
.qa p{margin-top:9px;font-size:15.5px;color:var(--ink-70)}
.bg-navy .qa p{color:#a3b8d0}
.figure{margin-top:28px;position:relative}
.figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figure figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-50);letter-spacing:.02em}

/* ------------------------------------------------ franja llamado */
.band{background:var(--navy);color:#fff;padding:clamp(42px,5vw,66px) 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,54px);flex-wrap:wrap}
.band h3{font-size:clamp(22px,2.5vw,32px);max-width:26ch}
.band p{margin-top:13px;color:#b8cbe0;font-size:16px;max-width:52ch}

/* ------------------------------------------------ contacto */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,72px);margin-top:clamp(32px,4vw,50px);align-items:start}
.cinfo dl{margin:28px 0 0;display:grid;gap:22px}
.cinfo dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.cinfo dd{margin:7px 0 0;font-size:17px;color:#fff;font-weight:500}
.cinfo dd small{display:block;color:var(--steel);font-size:13px;font-weight:400;margin-top:4px}
form{background:#fff;padding:clamp(24px,3vw,36px);color:var(--ink)}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
label{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:8px}
.f{margin-bottom:17px}
input,select,textarea{width:100%;font-family:var(--ff-b);font-size:16px;padding:13px 15px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff}
textarea{min-height:112px;resize:vertical}
form .btn-p{width:100%;border:none;margin-top:4px}
.note{font-size:13px;color:var(--ink-50);margin-top:15px;text-align:center}

/* ------------------------------------------------ prosa legal */
.prose{max-width:72ch;margin-top:clamp(28px,3vw,42px)}
.prose h2{font-size:clamp(22px,2.2vw,29px);margin-top:46px}
.prose h3{font-size:17px;margin-top:32px;color:var(--navy)}
.prose p,.prose li{font-size:16.5px;color:var(--ink-70);margin-top:15px}
.prose ul,.prose ol{padding-left:24px}
.prose .updated{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}

/* ------------------------------------------------ pie */
footer.site{background:var(--navy-950);color:#93a9c2;border-top:1px solid var(--line-dark);
  padding:clamp(48px,5vw,76px) 0 28px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,58px)}
footer.site img{height:56px;width:auto}
footer.site .about{margin-top:22px;max-width:34ch;font-size:14.5px;line-height:1.66}
footer.site h5{font-family:var(--ff-d);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;margin:0 0 18px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
footer.site a:hover{color:#fff}
footer.site small{display:inline-block;margin-top:3px;font-size:12.5px;color:#6f88a4;letter-spacing:.04em}
.legal{margin-top:clamp(38px,4vw,58px);padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#7891ab}
.legal ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}

/* ------------------------------------------------ aviso de versión */
.demo{background:#fff3cf;border-bottom:1px solid #e6cf8d;color:#5a4406;font-size:13px;padding:10px 0}
.demo .wrap{display:flex;gap:12px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap}
.demo b{font-weight:600}

/* ------------------------------------------------ 404 */
.err{min-height:52vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.err .code{font-family:var(--ff-d);font-size:clamp(68px,11vw,148px);font-weight:800;line-height:.9;
  color:var(--sky);opacity:.3}

@media (max-width:1100px){
  nav.main{display:none}
  .burger{display:block}
  .hero .grid{grid-template-columns:1fr;min-height:0}
  .hero .txt{max-width:none;margin-left:0;padding:clamp(38px,6vw,60px) var(--pad) clamp(34px,5vw,50px);
    max-width:var(--max);margin-inline:auto;width:100%}
  .hero .shot{aspect-ratio:16/9;order:-1}
  .hero .shot::after{background:linear-gradient(180deg,rgba(4,16,32,.35),rgba(4,16,32,.9))}
  .sols,.sectors,.flow,.why,.svc,.mv{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .flow .st{padding-right:22px}
  .two,.two.narrow,.contact,.fgrid{grid-template-columns:1fr}
  .fgrid{gap:36px}
}
@media (max-width:1340px){ .brand .lock{display:none} }
@media (max-width:780px){
  header.site .wrap{min-height:68px;gap:14px}
}
@media (max-width:660px){
  .sols,.sectors,.flow,.why,.svc,.mv,.facts .wrap,form .row{grid-template-columns:1fr}
  .flow{border-top:none}
  .flow .st{border-top:1px solid var(--line-dark);padding:26px 0 6px}
  .flow.on-light .st{border-top-color:var(--line)}
  .util-l{display:none}
  .btn{width:100%}
  header.site .btn{display:none}
  .band .btn{width:auto}
  .facts .wrap{gap:26px}
}

/* menú móvil */
nav.main.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
  gap:0;align-items:stretch;padding:10px var(--pad) 22px;border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);max-height:calc(100vh - 82px);overflow-y:auto}
nav.main.open>div{width:100%}
nav.main.open a.top{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}
nav.main.open .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
  background:var(--paper);padding:4px 0 10px;min-width:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}