/* Academia MG — site styles. Dark is the brand; light is the alternative.
   Every color comes from the tokens below, so both modes stay a matched set. */
:root{
  --bg:#0A0A0A; --bg2:#131313; --line:#272727; --fg:#F4F4F1; --mute:#9C9C97; --soft:#CFCFCA;
  --acc:#8FB8E8; --comp:#0F1936; --compline:#233262; --onacc:#0A0A0A; --inv:#F4F4F1; --oninv:#0A0A0A;
  --ok:#7FD39A; --bad:#FF8A80;
  --disp:"Archivo","Arial Narrow",Arial,sans-serif;
  --gut:clamp(16px,4vw,44px);
  color-scheme:dark;
}
:root[data-mode="light"]{
  --bg:#F3F4F1; --bg2:#E7E9E4; --line:#D2D5CE; --fg:#0B0B0B; --mute:#5E615A; --soft:#34362F;
  --acc:#1F3F9A; --comp:#DDE4F3; --compline:#B9C6E6; --onacc:#FFFFFF; --inv:#0B0B0B; --oninv:#F3F4F1;
  --ok:#1B7A3A; --bad:#B3261E;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--disp);font-size:16px;line-height:1.5;transition:background .25s,color .25s}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--inv);color:var(--oninv);padding:8px 12px;z-index:20}
.skip:focus{left:8px}
.logo-d{display:block}.logo-l{display:none}
:root[data-mode="light"] .logo-d{display:none}:root[data-mode="light"] .logo-l{display:block}
.sel{user-select:all}

/* Nav */
.nav{display:flex;align-items:center;gap:26px;padding:16px var(--gut);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
.nav .logo img{height:22px;width:auto}
.menu{display:flex;gap:22px}
.menu a{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-stretch:112%;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--acc)}
.menu a[aria-current="page"]{border-color:var(--fg)}
.tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.tg{height:36px;min-width:36px;padding:0;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.12em}
.tg:hover{border-color:var(--fg)}
.tg svg{width:15px;height:15px}
.langlink{font-size:13px;font-weight:600;padding:6px 4px;border-bottom:1px solid transparent}
.langlink:hover{border-color:currentColor}
.i-moon{display:none}
:root[data-mode="light"] .i-sun{display:none}:root[data-mode="light"] .i-moon{display:block}
.burger{display:none}
.burger i{display:block;width:16px;height:2px;background:var(--fg);box-shadow:0 5px 0 var(--fg),0 -5px 0 var(--fg)}
.burger[aria-expanded="true"] i{box-shadow:none;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{content:"";display:block;width:16px;height:2px;background:var(--fg);transform:rotate(90deg)}

/* Type */
.eyebrow{font-stretch:125%;font-weight:700;letter-spacing:.36em;font-size:11px;text-transform:uppercase;color:var(--mute)}
.h{font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(42px,6.4vw,84px);line-height:.92;margin:.14em 0 0;text-wrap:balance}
.h3{margin:0;font-stretch:62%;font-weight:900;font-size:clamp(34px,3.6vw,46px);line-height:.9;text-transform:uppercase}
.lede{color:var(--soft);max-width:56ch;margin-top:16px;font-size:17px;line-height:1.55}
.lede.flush{margin:0}
.kicker{color:var(--acc);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.age{font-stretch:125%;font-weight:800;letter-spacing:.28em;font-size:11px;text-transform:uppercase;color:var(--acc)}
.pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--acc);color:var(--onacc);vertical-align:middle}
blockquote{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.4;font-weight:500;max-width:34ch}

.sec{padding:72px var(--gut)}
.sec + .sec{border-top:1px solid var(--line)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;border:1.5px solid var(--fg);transition:background .15s,color .15s}
.btn:hover{background:var(--inv);color:var(--oninv)}
.btn.solid{background:var(--inv);color:var(--oninv)}
.btn.solid:hover{background:transparent;color:var(--fg)}
/* Links that leave the site carry a drawn arrow, not the ↗ character:
   iPhones turn that into an emoji. */
.btn.ext::after,.more.ext::after{content:"";width:10px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat}
.more.ext{align-items:center}
.more{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;gap:8px;border-bottom:1.5px solid currentColor;padding-bottom:3px;align-self:start}
.more:hover{color:var(--acc)}
.band{display:flex;flex-wrap:wrap;gap:24px;align-items:end;justify-content:space-between}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.split.top{align-items:start}

/* Home: the photo, two doors, the partners. Nothing else. */
.cap{font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-stretch:125%}
.big{font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance}
.hero{position:relative;aspect-ratio:1280/576;max-width:100%;max-height:calc(100vh - 70px);min-height:420px;width:100%;background:#99B6D6 url(/static/img/hero-color-hq.webp) 50% 40%/cover no-repeat;overflow:hidden}
/* Arriba también se oscurece (2026-10-24, Nacho) para que resalte el logo de Nike en blanco. */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.25) 18%,rgba(10,10,10,0) 36%,rgba(10,10,10,0) 40%,rgba(10,10,10,.8) 100%)}
.hero .in{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,4.5vw,52px);z-index:1;display:flex;flex-direction:column;gap:22px;color:#F4F4F1}
.hero h1{font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(42px,7vw,100px);line-height:.95;margin:0}
.hero h1 span{display:block}
.hero .btn{border-color:#F4F4F1;color:#F4F4F1}
.hero .btn.solid{background:#F4F4F1;color:#0A0A0A}
.hero .btn:hover{background:#F4F4F1;color:#0A0A0A}
.hero .btn.solid:hover{background:transparent;color:#F4F4F1}
/* Nike, partner principal (2026-10-24, Nacho). En la compu va dentro de la foto,
   arriba a la izquierda, en el celeste (.nike-hero); en el celular, una
   franja propia apenas termina la foto, sin fondo propio: usa el de la página,
   así al cambiar de modo cambia junto con el bloque de MG (.nike-band). La fila de Partners del final queda como estaba. */
/* Sin botones de Formación y Competencia en la portada (2026-10-24, Nacho): ya
   están en el menú y en las dos puertas de abajo. */
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
/* Compu (2026-10-24, Nacho, opción C): Nike arriba a la izquierda, en blanco sobre el celeste. */
.nike-hero{position:absolute;left:var(--gut);top:clamp(24px,3.2vw,48px);z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#F4F4F1}
.nike-hero .nf{display:block;height:clamp(30px,3.1vw,44px);aspect-ratio:1225/200;background:currentColor;-webkit-mask:url(/static/img/partners/nike-futbol.png) center/contain no-repeat;mask:url(/static/img/partners/nike-futbol.png) center/contain no-repeat}
.nike-hero .t{font-size:12px;line-height:1;font-weight:800;letter-spacing:.28em;margin-right:-.28em;text-transform:uppercase;white-space:nowrap}
.nike-band{display:none}
.nike-band{align-items:center;justify-content:center;gap:clamp(18px,3vw,36px);padding:clamp(26px,4vw,44px) var(--gut);color:var(--fg);border-block:1px solid var(--line)}
.nike-band .nk{display:block;height:clamp(64px,7vw,96px);aspect-ratio:275/240;background:currentColor;-webkit-mask:url(/static/img/partners/nike-escudo.png) center/contain no-repeat;mask:url(/static/img/partners/nike-escudo.png) center/contain no-repeat}
.nike-band .t{font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,40px);letter-spacing:.02em}
@media (max-width:560px){.nike-hero{display:none}.nike-band{display:flex;border:0;padding:20px var(--gut) 8px}.nike-band + .claim{padding-top:44px}}
.claim{padding:clamp(72px,11vw,150px) var(--gut);display:flex;flex-direction:column;align-items:center;gap:clamp(32px,4.5vw,56px);text-align:center}
.claim-mark{display:block;width:clamp(200px,34vw,440px);aspect-ratio:747/374;background:var(--fg);-webkit-mask:url(/static/img/mg-mark.png) center/contain no-repeat;mask:url(/static/img/mg-mark.png) center/contain no-repeat}
.claim p{max-width:34ch;font-size:clamp(17px,1.7vw,22px);font-style:italic;line-height:1.45;color:var(--soft);text-wrap:balance}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}
.door{position:relative;aspect-ratio:4/4.6;max-width:100%;background:center/cover no-repeat;overflow:hidden;color:#F4F4F1}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.72) 100%);transition:background .3s}
.door:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.8) 100%)}
.door .in{position:absolute;left:24px;right:96px;bottom:24px;z-index:1;display:flex;flex-direction:column;gap:8px}
.door .dt{font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(36px,4.6vw,64px);line-height:.92}
.circ{position:absolute;right:22px;bottom:24px;z-index:1;width:54px;height:54px;border-radius:50%;border:1.5px solid #F4F4F1;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .2s,color .2s}
.door:hover .circ{background:#F4F4F1;color:#0A0A0A}
.partners-row{padding:clamp(52px,7vw,88px) var(--gut);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.partners-row .cap{color:var(--mute)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(32px,7vw,88px)}
.logos .mark{display:block;height:var(--h);background:var(--fg);opacity:.82;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.logos .mark-link{display:block;border-radius:4px}
.logos .mark-link:hover .mark,.logos .mark-link:focus-visible .mark{opacity:1}
.logos-top{justify-content:flex-start;margin-top:clamp(32px,4vw,48px)}
@media (max-width:560px){.logos .mark{height:calc(var(--h)*.8)}}
/* Partners page (2026-10-23, Nacho): each brand in a box of its own, so the
   partners read right after the title instead of as a grey row under it. */
.pcards-lab{margin-top:clamp(36px,4.5vw,56px)}
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:14px}
.pcards li{display:flex;background:var(--bg2)}
.pcard{flex:1;display:flex;flex-direction:column;align-items:center;gap:28px;padding:clamp(44px,5.5vw,72px) 24px 20px;min-height:clamp(210px,22vw,270px)}
.pcard .mark{display:block;height:var(--ch);max-width:80%;margin-block:auto;background:var(--fg);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pcard small{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
a.pcard:hover small,a.pcard:focus-visible small{color:var(--fg)}
/* The arrow is drawn, not the ↗ character: iPhones turn that into an emoji. */
.pcard small{display:inline-flex;align-items:center;gap:7px}
.pcard .out{width:10px;height:10px;flex:none}
@media (max-width:560px){.pcard{min-height:180px;padding-top:36px}.pcard .mark{height:calc(var(--ch)*.8)}}
.wm{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.01em;color:var(--mute)}
.teaser-m .ph,.bio .ph{background:#BDBDBB url(/static/img/mariano.webp) 50% 22%/cover}

/* Inner pages with photos */
.phero{position:relative;aspect-ratio:16/6.5;max-width:100%;min-height:300px;width:100%;background:center 40%/cover no-repeat;color:#F4F4F1}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.75) 100%)}
.phero .in{position:absolute;left:var(--gut);bottom:clamp(22px,4vw,44px);z-index:1;display:flex;flex-direction:column;gap:10px}
.phero .big{font-size:clamp(44px,7vw,100px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
@media (min-width:901px){.trio.duo{grid-template-columns:repeat(2,1fr)}}
@media (min-width:901px){.trio.duo .card .im{aspect-ratio:5/4}}
.card{display:flex;flex-direction:column;gap:14px}
.card .im{aspect-ratio:4/5;max-width:100%;background:center/cover no-repeat}
.card .tx{padding:4px 18px 26px;display:flex;flex-direction:column;gap:8px}
.card .cap{color:var(--acc);font-size:10px}
.card h2{font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(30px,3vw,40px);line-height:.95;margin:0}
.card p{color:var(--mute);font-size:15px}
a.card:hover h2{color:var(--acc)}
.card .more{margin-top:6px}
.cta{display:flex;justify-content:center;padding:36px var(--gut) 64px}

/* Three-column rows (mission, formats, partners) */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
.cols3 > div{padding:28px 26px 4px 0;display:flex;flex-direction:column;gap:10px}
.cols3 > div + div{padding-left:26px;border-left:1px solid var(--line)}
.cols3.cols2{grid-template-columns:repeat(2,1fr)}
.cols3 p{color:var(--soft)}
.cols3 .kicker,.cols3 .when{color:var(--acc)}
.fmts{margin-top:0}
.when{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.why .big{color:var(--fg);font-stretch:62%;font-weight:900;font-size:clamp(34px,3.8vw,48px);line-height:.95;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.map{width:100%;max-width:260px;justify-self:center;opacity:.9}
:root[data-mode="light"] .map{filter:invert(1);opacity:.75}

/* Mariano */
.bio{display:grid;grid-template-columns:1fr 1.05fr;background:var(--bg2)}
.bio .ph{min-height:620px}
.bio .tx{padding:64px clamp(16px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.firma{width:200px;margin:-6px 0 -4px -8px}
:root[data-mode="light"] .firma{filter:invert(1)}
.cv{border-top:1px solid var(--line)}
.cv li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--soft)}
.cv b{color:var(--fg);font-stretch:62%;font-weight:900;font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.nums b{display:block;font-stretch:62%;font-weight:900;font-size:clamp(40px,5vw,62px);line-height:.9;font-variant-numeric:tabular-nums}
.nums span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* Formación / Competencia headers */
.phead{display:grid;grid-template-columns:1.1fr 1fr;min-height:360px}
.phead .tx{padding:64px var(--gut) 48px;display:flex;flex-direction:column;justify-content:end}
.phead .im{background:center/cover no-repeat;min-height:260px}
.phead.comp{background:var(--comp)}

/* Contacto */
#form{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 96px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;max-width:720px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:6px}
.form label > span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 13px;width:100%}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.form [aria-invalid="true"]{border-color:var(--bad)}
.err{font-style:normal;font-size:13px;color:var(--bad)}
.send{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.send small{color:var(--mute);font-size:13px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.notice{margin-top:24px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);font-size:15px;max-width:60ch}
.notice.ok{border-color:var(--ok)}
.notice.bad{border-color:var(--bad);margin-top:0}
.direct{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.direct > div{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.direct .mail{font-size:19px;font-weight:600}

/* Footer */
.footer{border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding:44px var(--gut) 28px;font-size:14px;color:var(--mute)}
.foot img{height:24px;width:auto;margin-bottom:12px}
.fh{margin:0 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);font-weight:700}
.foot ul{display:grid;gap:6px}
.foot a:hover{color:var(--fg)}
.fc{margin-top:14px}
.soc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.soc a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--fg)}
.soc a:hover{background:var(--inv);color:var(--oninv)}
.soc svg{width:18px;height:18px}
.legal{padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:12px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:900px){
  .nav{gap:12px}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:4px var(--gut) 12px}
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line);color:var(--acc)}
  .burger{display:inline-flex}
  .doors,.split,.teaser-m,.bio,.phead,.form,.trio{grid-template-columns:1fr}
  .card .im{aspect-ratio:16/10}
  .door{aspect-ratio:4/4.2}
  .teaser-m .ph{min-height:320px}.bio .ph{min-height:420px}
  .phead .tx{padding-top:48px}
  .cols3,.cols3.cols2{grid-template-columns:1fr}
  .cols3 > div,.cols3 > div + div{padding:24px 0;border-left:0}
  .cols3 > div + div{border-top:1px solid var(--line)}
  .nums{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .map{max-width:180px}
  .sec{padding-block:56px}
}
@media (max-width:560px){
  /* Celular (2026-10-23, Nacho): la chilena entera, con la pelota. hero-movil.webp
     es la misma foto con el cielo estirado hacia arriba con su propio celeste,
     así el título queda sobre un solo tono. Los botones van debajo, sobre el fondo.
     Recortada a 1200x1080 para acercar el título a la chilena. */
  .hero{aspect-ratio:auto;max-height:none;min-height:0;padding-bottom:0;background:var(--bg) url(/static/img/hero-movil.webp?v=3) center top/100% auto no-repeat}
  .hero::after{position:static;display:block;aspect-ratio:1200/1080;background:none}
  .hero .in{top:24px;bottom:18px;justify-content:space-between}
  .hero h1{color:#0A0A0A}
  .hero .btn{border-color:var(--fg);color:var(--fg)}
  .hero .btn.solid{background:var(--fg);color:var(--bg)}
  .hero .btn:hover{background:var(--fg);color:var(--bg)}
  .hero .btn.solid:hover{background:transparent;color:var(--fg)}
  /* Menú en celular (2026-10-23, Nacho): tapa toda la pantalla, como la web vieja.
     z-index:-1 lo deja dentro del nav, debajo del logo y los botones. */
  .menu{position:fixed;inset:0;z-index:-1;justify-content:center;align-items:center;gap:22px;border:0;padding:calc(env(safe-area-inset-top,0px) + 80px) var(--gut) 40px;overflow-y:auto}
  .menu a{font-size:24px;font-weight:600;letter-spacing:.08em;font-stretch:100%;padding:4px 0;border:0}
  .menu a[aria-current="page"]{color:var(--acc)}
  html.menu-open{overflow:hidden}
  .phero{aspect-ratio:4/4}
  .values{grid-template-columns:1fr}
  .values li + li{border-left:0;border-top:1px solid var(--line)}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}