/* Maqueta del sitio de Antares (Bimm Studio, 26/oct/2026). Colores y letras de sus manuales de identidad. */
:root{
  --marino:#031329; --azul:#0057a1; --azul2:#3078ab; --naranja:#f09103; --hielo:#eaf3f5;
  --prepa:#00529e; --prepa2:#133089; --prepa-cielo:#00acde; --prepa-naranja:#f48d00;
  --derecho:#4f4f4d; --psico:#803889; --arqui:#3da838; --admin:#f09103;
  --tinta:#0d1b2e; --suave:#55627a; --linea:#dfe6ec; --papel:#ffffff;
  --tit:'Bebas Neue',Impact,sans-serif; --txt:'Montserrat',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--txt);color:var(--tinta);background:var(--papel);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.cont{max-width:1200px;margin:0 auto;padding:0 20px}
.sello{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--marino);color:#fff;font:600 12px var(--txt);padding:8px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:.92}
.sello b{color:var(--naranja)}

/* Barra de accesos por visitante (como la UAEH) */
.accesos{background:var(--marino);color:#cfe0ee;font-size:13px}
.accesos .cont{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.accesos nav{display:flex;gap:4px;flex-wrap:wrap}
.accesos nav a{padding:6px 12px;border-radius:999px;font-weight:600;letter-spacing:.02em}
.accesos nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.accesos .tel{display:flex;gap:16px;white-space:nowrap}
.accesos .tel a:hover{color:#fff}

/* Encabezado */
header.sitio{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
header.sitio .cont{display:flex;align-items:center;gap:22px;min-height:82px}
.marcas{display:flex;align-items:center;gap:14px;flex:none}
.marcas img.esc{height:58px}
.marcas img.rp{height:38px}
.marcas i{width:1px;height:38px;background:var(--linea)}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu a{font:600 13.5px var(--txt);padding:10px 9px;white-space:nowrap;border-radius:8px;color:var(--tinta);position:relative}
.menu a:hover,.menu a.activo{color:var(--azul)}
.menu>a.activo::after,.menu .sub>a.activo::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:var(--naranja);border-radius:2px}
.menu .sub{position:relative}
.menu .sub>div{display:none;position:absolute;top:100%;left:0;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(3,19,41,.18);padding:8px;min-width:240px}
.menu .sub:hover>div{display:block}
.menu .sub>div a{display:flex;align-items:center;gap:10px;padding:10px 12px}
.menu .sub>div a i{width:10px;height:10px;border-radius:3px}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px var(--txt);padding:14px 22px;border-radius:12px;transition:transform .15s,box-shadow .15s;cursor:pointer;border:0}
.btn:hover{transform:translateY(-1px)}
.btn.nar{background:var(--naranja);color:#1a1100;box-shadow:0 10px 24px -10px rgba(240,145,3,.8)}
.btn.blanco{background:#fff;color:var(--marino)}
.btn.borde{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);color:#fff}
.btn.azul{background:var(--azul);color:#fff}
.btn.chico{padding:10px 16px;font-size:14px;border-radius:10px}
.hamb{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid var(--linea);background:#fff;font-size:22px}

/* Héroe */
.heroe{position:relative;color:#fff;overflow:hidden}
.heroe .foto{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.heroe .velo{position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,19,41,.94) 0%,rgba(3,19,41,.78) 45%,rgba(0,87,161,.25) 100%)}
.heroe .cont{position:relative;padding:110px 20px 120px}
.etq{display:inline-block;font:700 12px var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--naranja);margin-bottom:16px}
h1,h2,h3{font-family:var(--tit);font-weight:400;letter-spacing:.01em;line-height:.95}
.heroe h1{font-size:clamp(54px,8vw,104px);max-width:760px}
.heroe h1 span{color:var(--naranja)}
.heroe p.lead{font-size:clamp(16px,2vw,20px);max-width:600px;margin:22px 0 32px;color:#d9e6f2}
.heroe .botones{display:flex;gap:12px;flex-wrap:wrap}

/* Datos rápidos */
.datos{position:relative;margin-top:-54px;z-index:5}
.datos .cont{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border-radius:18px;box-shadow:0 24px 60px -24px rgba(3,19,41,.35);overflow:hidden}
.datos div{padding:24px 22px;border-right:1px solid var(--linea)}
.datos div:last-child{border:0}
.datos b{display:block;font:400 40px/1 var(--tit);color:var(--azul)}
.datos span{font-size:14px;color:var(--suave);font-weight:500}

section.bloque{padding:96px 0}
section.bloque.hielo{background:var(--hielo)}
section.bloque.oscuro{background:var(--marino);color:#fff}
.encab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.encab h2{font-size:clamp(42px,5vw,64px)}
.encab p{max-width:520px;color:var(--suave)}
.oscuro .encab p{color:#b8c9db}

/* Oferta educativa */
.oferta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tarjeta{position:relative;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -26px rgba(3,19,41,.4);display:flex;flex-direction:column;transition:transform .2s}
.tarjeta:hover{transform:translateY(-4px)}
.tarjeta .img{height:190px;background-size:cover;background-position:center;position:relative}
.tarjeta .img .tono{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(3,19,41,.55))}
.tarjeta .img .chip{position:absolute;left:16px;bottom:14px;font:700 11px var(--txt);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--c,var(--azul));padding:6px 10px;border-radius:999px}
.tarjeta .tx{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1;border-top:5px solid var(--c,var(--azul))}
.tarjeta h3{font-size:32px;color:var(--tinta)}
.tarjeta p{font-size:14.5px;color:var(--suave);flex:1}
.tarjeta .mas{font:700 14px var(--txt);color:var(--c,var(--azul));margin-top:6px}
.tarjeta.prepa{grid-column:span 3;flex-direction:row;background:linear-gradient(110deg,var(--prepa2),var(--prepa));color:#fff}
.tarjeta.prepa .img{width:46%;height:auto;min-height:280px}
.tarjeta.prepa .tx{border:0;padding:36px 40px;justify-content:center}
.tarjeta.prepa h3{color:#fff;font-size:46px}
.tarjeta.prepa p{color:#d6e6fb;flex:0}
.tarjeta.prepa img.logo{height:46px;background:#fff;border-radius:10px;padding:6px 10px;align-self:flex-start;margin-bottom:6px}
.tarjeta.prepa .mas{color:var(--prepa-naranja)}
.tarjeta.sin-foto .img{background:linear-gradient(135deg,var(--c),var(--marino))}
.tarjeta.sin-foto .img::after{content:attr(data-letra);position:absolute;right:18px;top:6px;font:400 120px/1 var(--tit);color:rgba(255,255,255,.18)}

/* Por qué Antares */
.porque{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.porque div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:26px}
.porque .ico{width:46px;height:46px;border-radius:12px;background:var(--naranja);display:grid;place-items:center;margin-bottom:16px}
.porque .ico svg{width:24px;height:24px;stroke:#1a1100;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.porque h3{font-size:28px;margin-bottom:8px}
.porque p{font-size:14.5px;color:#b8c9db}

/* Instalaciones */
.galeria{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:14px}
.galeria figure{position:relative;border-radius:16px;overflow:hidden;background-size:cover;background-position:center}
.galeria figure:first-child{grid-row:span 2}
.galeria figcaption{position:absolute;left:12px;bottom:12px;background:rgba(3,19,41,.8);color:#fff;font:600 13px var(--txt);padding:6px 10px;border-radius:8px}

/* Testimonio */
.testimonio{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
.testimonio img{border-radius:20px;aspect-ratio:1;object-fit:cover;box-shadow:0 24px 50px -24px rgba(3,19,41,.5)}
.testimonio blockquote{font:500 clamp(18px,2.2vw,24px)/1.5 var(--txt);color:var(--tinta)}
.testimonio blockquote::before{content:"“";display:block;font:400 110px/.6 var(--tit);color:var(--naranja)}
.testimonio cite{display:block;margin-top:18px;font-style:normal;font-weight:700}
.testimonio cite span{display:block;font-weight:500;color:var(--suave);font-size:14px}

/* Vida universitaria y blog */
.dos{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.dos img{border-radius:20px;box-shadow:0 24px 50px -24px rgba(3,19,41,.45)}
.lista{list-style:none;display:grid;gap:14px;margin:24px 0}
.lista li{display:flex;gap:12px;align-items:flex-start}
.lista li::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--naranja);margin-top:8px}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog article{background:#fff;border-radius:16px;padding:24px;box-shadow:0 14px 32px -24px rgba(3,19,41,.4);display:flex;flex-direction:column;gap:10px}
.blog .cat{font:700 11px var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.blog h3{font-size:28px}
.blog p{font-size:14px;color:var(--suave);flex:1}
.ejemplo{display:inline-block;font:600 11px var(--txt);background:#fff4e0;color:#8a5400;border-radius:6px;padding:3px 8px}

/* Llamado a la acción y pie */
.cta{background:linear-gradient(110deg,var(--azul),var(--marino));color:#fff;border-radius:24px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta h2{font-size:clamp(40px,5vw,60px)}
.cta p{color:#cfe0ee;max-width:520px;margin-top:10px}
footer{background:var(--marino);color:#b8c9db;padding:64px 0 28px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer h4{font:400 24px var(--tit);color:#fff;margin-bottom:12px;letter-spacing:.03em}
footer a{display:block;padding:3px 0}
footer a:hover{color:#fff}
footer .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.wa-flota{position:fixed;left:16px;bottom:16px;z-index:55;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.wa-flota svg{width:30px;height:30px;fill:#fff}

/* Página de carrera */
.carrera-heroe{background:linear-gradient(110deg,var(--marino) 0%,var(--marino) 50%,transparent 100%),var(--foto) center/cover;color:#fff}
.carrera-heroe .cont{padding:70px 20px 90px}
.migas{font-size:13px;color:#b8c9db;margin-bottom:22px}
.migas a:hover{color:#fff}
.carrera-heroe h1{font-size:clamp(56px,8vw,96px)}
.carrera-heroe h1 span{display:block;font-size:.45em;color:var(--naranja);letter-spacing:.08em}
.carrera-heroe .chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 30px}
.carrera-heroe .chips span{font:600 13px var(--txt);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:999px}
.ficha{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.ficha h2{font-size:48px;margin:0 0 16px}
.ficha h2:not(:first-child){margin-top:48px}
.ficha p{color:#33415a;margin-bottom:14px}
.lado{position:sticky;top:110px;background:#fff;border-radius:18px;box-shadow:0 24px 50px -26px rgba(3,19,41,.45);padding:26px;border-top:6px solid var(--c)}
.lado h3{font-size:30px;margin-bottom:6px}
.lado dl{display:grid;gap:12px;margin:18px 0 22px}
.lado dt{font:700 11px var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.lado dd{font-weight:600}
.lado form{display:grid;gap:10px}
.lado input,.lado select{font:500 16px var(--txt);padding:13px 14px;border-radius:10px;border:1px solid var(--linea);width:100%}
.perfil{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.perfil div{background:var(--hielo);border-radius:14px;padding:20px;border-left:4px solid var(--c)}
.perfil b{display:block;margin-bottom:6px}
.perfil span{font-size:14.5px;color:#33415a}

@media (max-width:1320px){.marcas img.rp{display:none}.marcas i{display:none}}
@media (max-width:1060px){
  .menu{display:none} .hamb{display:block}
  .oferta{grid-template-columns:1fr 1fr} .tarjeta.prepa{grid-column:span 2}
  .porque{grid-template-columns:1fr 1fr} .blog{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr} .ficha{grid-template-columns:1fr} .lado{position:static}
}
@media (max-width:680px){
  .accesos .tel{display:none} .accesos nav{gap:0} .accesos nav a{padding:6px 8px;font-size:12px}
  .marcas img.esc{height:46px} .marcas img.rp{height:30px}
  .heroe .cont{padding:70px 20px 100px}
  .datos .cont{grid-template-columns:1fr 1fr} .datos div:nth-child(2){border-right:0} .datos div{border-bottom:1px solid var(--linea)}
  section.bloque{padding:70px 0}
  .oferta,.porque,.blog,.perfil{grid-template-columns:1fr} .tarjeta.prepa{grid-column:auto;flex-direction:column} .tarjeta.prepa .img{width:100%;min-height:200px}
  .tarjeta.prepa .tx{padding:26px}
  .galeria{grid-template-columns:1fr 1fr;grid-template-rows:200px 160px 160px} .galeria figure:first-child{grid-column:span 2;grid-row:auto}
  .testimonio,.dos{grid-template-columns:1fr;gap:24px} .testimonio img{max-width:240px}
  .cta{padding:34px 26px} footer .cols{grid-template-columns:1fr}
  .sello{font-size:11px;padding:6px 10px}
}

/* Ajustes 26/oct: botón sin partir, flotantes y menú del celular */
.btn{white-space:nowrap}
.wa-flota{left:auto;right:16px}
.sello{right:auto;left:14px;opacity:.85}

/* ===== GeneratePress: que las secciones vayan de lado a lado (como en acon-wp) ===== */
body{background:#fff}
.site.grid-container,.site-content,.content-area,.site-main,.inside-article,.entry-content{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;float:none!important}
.separate-containers .inside-article,.one-container .site-content{background:transparent}
.entry-content>*{margin-block:0}
.site-header,.site-footer,.site-info{display:none!important}
.entry-content a{text-decoration:none}
.sello{display:none}
/* Página interior genérica */
.pag-heroe{background:linear-gradient(110deg,var(--marino),var(--azul));color:#fff}
.pag-heroe .cont{padding:64px 20px 72px}
.pag-heroe h1{font-size:clamp(52px,7vw,88px)}
.pag-heroe p{color:#cfe0ee;max-width:640px;margin-top:14px;font-size:18px}
.prosa{max-width:820px}
.prosa h2{font-size:44px;margin:40px 0 12px}
.prosa p{color:#33415a;margin-bottom:14px}
.dir{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.dir div{background:var(--hielo);border-radius:14px;padding:18px}
.dir b{display:block}
.dir span{font-size:14px;color:var(--suave)}
@media (max-width:680px){.dir{grid-template-columns:1fr}}
/* 26/oct: foto del héroe de carrera directa y botón ☰ visible sobre los estilos de GeneratePress */
.carrera-heroe{background-size:cover!important;background-position:center!important}

/* ===== R2 25/oct: menú del celular y vista por dispositivo ===== */
/* Lo que solo existe en el panel del celular */
.m-soy,.m-pie,.abre-sub{display:none}
/* Botón ☰ dibujado (tres rayas que se vuelven ✕); a prueba de los estilos de botón de GeneratePress */
button.hamb{display:none}
button.hamb,button.hamb:hover,button.hamb:focus{flex-direction:column;justify-content:center;align-items:center;gap:5px;width:46px;height:46px;flex:none;padding:0!important;margin-left:8px;border-radius:12px;border:1px solid var(--linea)!important;background:#fff!important;color:var(--tinta)!important;cursor:pointer}
.hamb span{pointer-events:none;display:block;width:20px;height:2px;border-radius:2px;background:var(--tinta);transition:transform .2s,opacity .2s}
header.sitio.abierto .hamb span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.sitio.abierto .hamb span:nth-child(2){opacity:0}
header.sitio.abierto .hamb span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.flecha{font-style:normal}
.btn.linea{box-shadow:inset 0 0 0 1.5px var(--linea);color:var(--tinta);background:#fff;justify-content:center}

/* Laptop angosta: el menú completo se aprieta un poco antes de pasar al ☰ */
@media (max-width:1240px) and (min-width:1061px){.menu a{padding:10px 7px;font-size:13px} header.sitio .cont{gap:14px}}

@media (max-width:1060px){
  .accesos .correo{display:none}
  header.sitio .cont{position:relative;min-height:72px;gap:12px}
  .marcas img.esc{height:50px}
  .marcas img.rp,.marcas i{display:block}
  .informes-cab{margin-left:auto}
  button.hamb,button.hamb:hover,button.hamb:focus{display:flex}
  html.menu-abierto{overflow:hidden}
  header.sitio.abierto{background:#fff;backdrop-filter:none}
  /* El panel ocupa del borde de la cabecera al fondo de la pantalla y se recorre por dentro */
  header.sitio .menu{display:flex;flex-direction:column;align-items:stretch;gap:0;position:fixed;left:0;right:0;top:var(--abajo,72px);bottom:0;margin:0;background:#fff;
    padding:8px max(20px,calc((100vw - 640px)/2)) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
    border-top:1px solid var(--linea);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility 0s .18s}
  header.sitio.abierto .menu{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
  header.sitio .menu>a,header.sitio .menu .sub>a{display:flex;align-items:center;font:600 17px var(--txt);padding:15px 4px;border-radius:0;border-bottom:1px solid var(--linea)}
  header.sitio .menu>a::after,header.sitio .menu .sub>a::after{content:"›";margin-left:auto;position:static;height:auto;background:none;color:#a6b2c1;font-size:22px;line-height:1}
  header.sitio .menu a.activo{color:var(--azul)}
  header.sitio .menu>a.activo,header.sitio .menu .sub>a.activo{box-shadow:inset 3px 0 0 var(--naranja);padding-left:14px}
  /* Licenciaturas: el nombre abre la página, la flecha despliega las carreras */
  .menu .sub{display:grid;grid-template-columns:1fr auto}
  .menu .sub>a{padding-right:0!important}
  .menu .sub>a::after,.menu .sub .flecha{display:none!important}
  button.abre-sub,button.abre-sub:hover,button.abre-sub:focus{display:flex;align-items:center;justify-content:center;width:52px;padding:0!important;border:0!important;border-bottom:1px solid var(--linea)!important;border-radius:0;background:transparent!important;color:var(--tinta)!important;font-size:16px;transition:transform .2s}
  .menu .sub.desplegado .abre-sub{color:var(--azul)!important}
  .menu .sub.desplegado .abre-sub{transform:rotate(180deg)}
  .menu .sub>div{display:none;grid-column:1/-1;position:static;box-shadow:none;border-radius:0;min-width:0;padding:4px 0 8px 10px;background:none;border-bottom:1px solid var(--linea)}
  .menu .sub.desplegado>div{display:block}
  .menu .sub:hover>div{display:none}
  .menu .sub.desplegado:hover>div{display:block}
  .menu .sub>div a{font:500 16px var(--txt);padding:11px 8px;border-radius:10px}
  .menu .sub>div a.activo{background:var(--hielo)}
  /* «Soy…»: los accesos por visitante, como fichas */
  .m-soy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0 16px}
  .m-soy span{width:100%;font:700 11px var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
  .m-soy a{font:600 14px var(--txt);padding:8px 14px;border-radius:999px;background:var(--hielo);color:var(--marino)}
  /* Pie del panel: lo que más se busca desde el celular */
  .m-pie{display:grid;gap:10px;margin-top:22px}
  .menu .m-pie .btn{justify-content:center;width:100%;padding:15px 20px;font-size:16px;border-radius:12px}
  .m-pie div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:680px){
  .accesos{display:none}
  header.sitio .cont{min-height:64px;padding:0 16px}
  .marcas img.esc{height:44px}
  .marcas img.rp,.marcas i{display:none}
  .informes-cab{padding:9px 14px!important;font-size:13.5px!important}
  .cont{padding-left:16px;padding-right:16px}
  /* Los bloques traen columnas fijas en línea: en el celular, una sola columna */
  .porque,.testimonio,.dos,.perfil,.oferta,.blog{grid-template-columns:1fr!important}
  .heroe .cont,.pag-heroe .cont{padding-left:16px;padding-right:16px}
  .pag-heroe .cont{padding-top:44px;padding-bottom:52px}
  .ficha h2,.prosa h2{font-size:38px}
}
@media (max-width:360px){.informes-cab{display:none}}
.ficha{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:1060px){.ficha{grid-template-columns:minmax(0,1fr)}}
/* R2.1: con el menú abierto no estorba el WhatsApp flotante (ya está en el panel); flecha y líneas de Licenciaturas parejas */
html.menu-abierto .wa-flota{display:none}
@media (max-width:1060px){
  .menu .sub{border-bottom:1px solid var(--linea)}
  header.sitio .menu .sub>a,button.abre-sub,button.abre-sub:hover,button.abre-sub:focus{border-bottom:0!important}
  button.abre-sub,button.abre-sub:hover,button.abre-sub:focus{align-self:stretch}
  button.abre-sub::before{content:"›";font-size:24px;line-height:1;color:#a6b2c1;transform:rotate(90deg);display:block}
  .menu .sub.desplegado button.abre-sub::before{color:var(--azul)}
  .menu .sub>div{border-bottom:0;border-top:1px solid var(--linea)}
}
@media (max-width:360px){button.hamb,button.hamb:hover,button.hamb:focus{margin-left:auto}}
