@font-face {
  font-family: 'ABCGaisyr';
  src: url('/assets/fonts/Gaisyr.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --fg:#232323; --bg:#ffffff; --muted:#666; --line:#ddd;
  --chip:#eee; --chip-h:#ddd;
}

*{ box-sizing:border-box; }

body{
  font-family: 'ABCGaisyr', 'Courier New', Courier, monospace;
  background:var(--bg); color:var(--fg);
  margin:0; min-height:100vh;
}

/* —— Header “glass” como en proyectos.html —— */
header{
  position:fixed; top:0; left:0; right:0;
  height:56px; z-index:500;
  display:flex; align-items:center;
  padding:8px 24px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.logo{
  display:block;
  width:140px; height:32px;
  background:url('/assets/logo40.png') left center/contain no-repeat;
}

/* —— Layout general —— */
/* —— Layout general (columna ancha por defecto) —— */
main{
  max-width: min(1180px, 94vw);
  margin: 100px auto 140px;  /* hueco para header y footer glass */
  padding: 0 24px;
}

/* Modificadores opcionales por si quieres ajustar en alguna página concreta */
main.main--narrow{ max-width: 760px; }
main.main--wide{   max-width: min(1400px, 96vw); }



h1{
  font-size:1.18em;
  font-weight:bold;
  letter-spacing:2px;
  color:#222;
  margin:0 0 28px 0;
}

.sub{
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.7;
}

/* —— Formularios (contacto) —— */
label{
  display:block;
  font-weight:bold;
  margin:14px 0 6px;
  letter-spacing:.1px;
}
input[type="text"],
input[type="email"],
textarea,
select{
  width:100%;
  padding:8px 12px;
  border:1px solid #ccc;
  border-radius:6px;
  font:inherit;
  background:#fafafa;
  color:#232323;
  transition:border .16s;
}
input:focus, textarea:focus, select:focus{
  border-color:#7cc7ec;
  outline:none;
}
button[type="submit"]{
  background:#eee; color:#222;
  border:none; border-radius:8px;
  padding:11px 30px; font:inherit; font-size:1em;
  cursor:pointer; margin-top:20px;
  transition: background .2s, color .2s;
}
button[type="submit"]:hover{ background:#ddd; color:#000; }

.extra-mail{
  margin-top:22px;
  color:#353535;
}
.extra-mail a{ color:#117; }

/* —— Footer “glass” como en proyectos.html —— */
.menu-bottom-bar{
  position:fixed; bottom:0; left:0; width:100%;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(0,0,0,.08);
  padding:12px 16px;
  display:flex; justify-content:flex-end; align-items:center;
  gap:0; z-index:300;
}
.menu-bottom-bar > a{
  color:var(--fg);
  text-decoration:none;
  font:inherit; font-size:.98em; letter-spacing:.5px;
  padding:8px 10px; border-radius:6px;
  display:inline-flex; align-items:center;
  transition:color .2s ease, background .2s ease;
}
.menu-bottom-bar > a:hover{
  background:rgba(0,0,0,.06); color:#111;
}
.menu-bottom-bar > a:not(:first-child)::before{
  content:'/'; color:#bbb; margin:0 8px 0 6px; font-weight:bold; opacity:.7;
}

/* —— Responsivo —— */
@media (max-width:900px){
  .logo{ width:80px; height:20px; }
  main{ margin:80px auto 120px; padding: 0 16px; }
}
@media (max-width:600px){
  .logo{ width:58px; height:15px; }
  main{ margin:60px auto 100px; padding: 0 12px; }
}