/* Coordinación de Docencia UAZ · Identidad 2025-2029 (Manual de Identidad Gráfica UAZ, pág. 21 y 24-25) */
body{margin:0}
img{max-width:100%}

/* Layout: estructura de uaz.edu.mx con la identidad del Manual de Identidad Gráfica UAZ 2025-2029.
   Colores: valores HEX del manual (pág. 21). Tipografías del manual: Nutmeg (títulos), Azo Sans y Century Gothic (texto).
   Montserrat es solo sustituto temporal mientras se cargan las fuentes con licencia web. */
:root{
  --azul-1:#01152E;   /* Azul UAZ (manual) */
  --azul-2:#1E3A63;   /* Azul UAZ (manual) */
  --azul-3:#002E52;   /* Azul UAZ (manual) */
  --dorado-1:#A18343; /* Dorado UAZ (manual) */
  --dorado-2:#C1A25D; /* Dorado UAZ (manual) */
  --dorado-3:#E3C177; /* Dorado UAZ (manual) */
  --gris-20:#CCCCCC;  /* 20% negro (manual) */
  --gris-40:#999999;  /* 40% negro (manual) */
  --blanco:#FFFFFF; color-scheme:light;
  --bg:var(--blanco); --surface:#F2F2F2; --fg:var(--azul-1); --muted:#4a5568; --line:var(--gris-20);
  --title-on-bg:var(--azul-2); --link:var(--azul-2);
  --oro:linear-gradient(90deg,var(--dorado-1),var(--dorado-3) 50%,var(--dorado-1));
  --titulos:"Nutmeg","Montserrat","Century Gothic",sans-serif;
  --texto:"Azo Sans","Century Gothic","Montserrat",sans-serif;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.65 var(--texto)}
a{color:inherit}
a:focus-visible{outline:3px solid var(--dorado-3);outline-offset:2px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:16px}
h1,h2,h3{font-family:var(--titulos);text-wrap:balance;line-height:1.15;margin:0}
.label{font:600 .74rem var(--texto);letter-spacing:.32em;text-transform:uppercase}
.rule{height:2px;background:var(--oro);border:0;margin:0}

/* Barra superior (como uaz.edu.mx) */
.topbar{background:var(--azul-1);color:var(--blanco);font-size:.84rem}
.topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:8px}
.topbar a{text-decoration:none;opacity:.85}.topbar a:hover{opacity:1}
.topbar .help{display:flex;flex-wrap:wrap;gap:4px 18px}
.topbar b{color:var(--dorado-3);font-weight:600}

/* Encabezado: convivencia Escudo | Imagotipo | Isotipo | Área (manual pág. 17-18) */
header.main{background:#FFFFFF;color:var(--azul-2)}
header.main .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;padding-block:18px;flex-wrap:wrap}
.convivencia{display:flex;align-items:center;gap:18px;text-decoration:none;min-width:0;flex-wrap:wrap}
.convivencia{display:block;width:100%}
.convivencia img{width:100%;max-width:1100px;height:auto;display:block;margin-inline:auto}
.sep{width:1px;align-self:stretch;background:var(--blanco);opacity:.8}
.area{display:flex;flex-direction:column;line-height:1.15}
.area strong{font:700 1.02rem var(--titulos);letter-spacing:.02em;text-transform:uppercase}
.area span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado-3)}
nav.menu{background:var(--azul-1);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
nav.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
nav.menu a{display:block;padding:12px 14px;color:var(--blanco);text-decoration:none;font:600 .82rem var(--texto);letter-spacing:.12em;text-transform:uppercase;border-bottom:3px solid transparent}
nav.menu a:hover,nav.menu a[aria-current]{border-bottom-color:var(--dorado-2);color:var(--dorado-3)}

/* Portada */
.hero{background:radial-gradient(120% 140% at 85% 0%,var(--azul-2) 0%,var(--azul-3) 45%,var(--azul-1) 100%);color:var(--blanco);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;padding-block:64px 56px;align-items:center;position:relative}
.hero .label{color:var(--dorado-3)}
.hero h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;margin-block:14px 16px}
.hero h1 em{font-style:normal;background:var(--oro);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:58ch;opacity:.9;margin:0 0 26px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;background:var(--oro);color:var(--azul-1);font:700 .82rem var(--texto);letter-spacing:.14em;text-transform:uppercase;padding:13px 24px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 1px var(--dorado-2)}
.aviso{border:1px solid rgba(227,193,119,.45);padding:26px;background:rgba(1,21,46,.45)}
.aviso .label{display:block;margin-bottom:10px}
.aviso h3{font-size:1.3rem;margin-bottom:8px}
.aviso p{margin:0 0 16px;font-size:.95rem;opacity:.88}
.aviso a{color:var(--dorado-3);font-weight:600;text-decoration:none}
.dots{display:flex;gap:6px;margin-top:18px}.dots i{width:24px;height:3px;background:rgba(255,255,255,.3)}.dots i:first-child{background:var(--dorado-2)}

section{padding-block:60px}
.sec-head{margin-bottom:30px;display:grid;gap:10px}
.sec-head .label{color:var(--dorado-1)}
.sec-head h2{font-size:clamp(1.55rem,2.8vw,2.1rem);color:var(--title-on-bg)}
.sec-head .rule{width:120px}

.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px}
.svc{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--bg);border:1px solid var(--line);text-decoration:none;position:relative}
.svc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--azul-2)}
.svc:hover::before{background:var(--oro)}
.svc .label{color:var(--dorado-1);font-size:.68rem}
.svc h3{font-size:1.12rem;color:var(--title-on-bg)}
.svc p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.svc .more{font:700 .76rem var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--link)}

.band{background:var(--blanco);color:var(--fg);border-top:1px solid var(--line)}
.mvv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.mvv h3{font-size:1.1rem;color:var(--azul-2);margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}
.mvv p{margin:0;color:var(--muted)}
.values{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.values li{list-style:none;font-size:.84rem;padding:3px 11px;border:1px solid var(--dorado-2);color:var(--azul-2)}


.egel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:start}
.egel p{color:var(--muted);margin:0 0 16px}
.attn{display:grid;gap:4px;font-size:.95rem}
.attn b{color:var(--title-on-bg)}
.tbl{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line)}
th{background:var(--azul-2);color:var(--blanco);font:600 .72rem var(--texto);letter-spacing:.14em;text-transform:uppercase}
.note{font-size:.82rem;color:var(--muted);margin-top:10px}

footer{background:#FFFFFF;color:var(--azul-1);font-size:.9rem}
footer .logo{padding-block:36px 0}
footer .logo img{width:100%;max-width:760px;height:auto;display:block}
footer .top{border-top:2px solid transparent;border-image:var(--oro) 1}
footer .cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px;padding-block:44px 30px}
footer h4{font:600 .72rem var(--texto);letter-spacing:.28em;text-transform:uppercase;margin:0 0 12px;color:var(--dorado-1)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer a{text-decoration:none;opacity:.85}footer a:hover{opacity:1;color:var(--dorado-1)}
footer address{font-style:normal;opacity:.88;line-height:1.6}
.legal{background:var(--azul-2);color:#FFFFFF}
.legal .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:14px;font-size:.78rem;opacity:.75;letter-spacing:.06em}


@media (max-width:900px){
  .hero .wrap,.egel{grid-template-columns:minmax(0,1fr)}
  .mvv{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
    footer .cols{grid-template-columns:minmax(0,1fr)}
  nav.menu a{padding:10px 9px;font-size:.74rem;letter-spacing:.08em}
}