:root {
  --noche: #10161c;
  --panel: #18222b;
  --linea: rgba(196, 163, 106, .38);
  --bronce: #c4a36a;
  --texto: #f4efe6;
  --suave: #c9c1b4;
  --vino: #8e3d45;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  color: var(--texto);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  background-color: var(--noche);
  background-image:
    radial-gradient(ellipse 90% 42% at 50% -8%, rgba(196, 163, 106, .22), transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(88, 42, 48, .28), transparent 42%);
  background-attachment: fixed;
}
img { width: 100%; height: auto; max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
body.lock { overflow: hidden; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; line-height: 1.2; margin: 0 0 .45rem; }
p { margin: 0 0 .8rem; overflow-wrap: break-word; }
.marco { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; }

.techo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 22, 28, .96);
  border-bottom: 1px solid var(--linea);
}
.util, .marca-fila, .mapa { width: min(1080px, calc(100% - 2rem)); margin: 0 auto; }
.util {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem 1rem;
  padding: .45rem 0;
  font-size: .82rem;
}
.util a { color: var(--bronce); text-decoration: none; }
.marca-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .35rem 0 .55rem;
}
.casa {
  text-decoration: none;
  font-size: 1.35rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gestos { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .85rem; max-width: 100%; }
.gesto, .menu {
  border: 0;
  background: transparent;
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
  padding: .2rem 0;
}
.menu {
  display: none;
  border: 1px solid var(--bronce);
  padding: .35rem .7rem;
}
.lengua {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0 0 .65rem;
}
.lengua button {
  border: 1px solid var(--bronce);
  background: transparent;
  color: var(--texto);
  padding: .45rem .85rem;
  cursor: pointer;
  font-size: 1rem;
}
.lengua button[aria-current="true"] { background: var(--bronce); color: #1a140c; }
.mapa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem 1.15rem;
  padding-bottom: .55rem;
}
.mapa > a { text-decoration: none; padding: .45rem 0; }
.mapa details { position: relative; }
.mapa summary {
  list-style: none;
  cursor: pointer;
  padding: .45rem 0;
}
.mapa summary::-webkit-details-marker { display: none; }
.caja {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  min-width: 15rem;
  max-width: min(20rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--linea);
  padding: .35rem 0;
}
.mapa details:nth-last-child(-n+3) .caja { left: auto; right: 0; }
.caja a { display: block; padding: .45rem .9rem; text-decoration: none; }
.caja a:hover, .mapa > a:hover, .util a:hover { color: var(--bronce); }
.util-movil { display: none; }

.portada { padding: 1.4rem 0 1rem; }
.portada h1 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 18ch; }
.portada .lead { max-width: 38rem; color: var(--suave); }
.pasos { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 1rem; }
.rejilla, .par {
  display: grid;
  gap: 1rem;
  padding-bottom: 1.4rem;
}
.rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.par { grid-template-columns: 1.15fr .85fr; }
.tarjeta, .oficios, .horas, .lectura {
  min-width: 0;
  background: rgba(24, 34, 43, .78);
  border: 1px solid var(--linea);
  padding: 1rem;
}
.tarjeta h2 { font-size: 1.25rem; }
.tarjeta a, .pasos a, .vinculos a { color: var(--bronce); }
.horas { margin-bottom: 1.4rem; }
.horas ul, .hechos, .vinculos { margin: 0; padding-left: 1.1rem; }
.oficios { margin-bottom: 2rem; }
.oficios details { border-top: 1px solid var(--linea); }
.oficios summary { cursor: pointer; padding: .75rem 0; }
.oficios p { max-width: 40rem; color: var(--suave); }

.prosa h2, .horas h2, .oficios h2 { font-size: 1.35rem; margin: 1.3rem 0 .45rem; }
.prosa ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prosa li, .hechos li { margin: .3rem 0; }
caption { caption-side: top; text-align: left; color: var(--bronce); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; padding: 0 0 .45rem; }
.scroll { overflow-x: auto; margin: 0 0 1.2rem; max-width: 100%; }
.prosa table, .horas table { min-width: 28rem; }
.prosa { max-width: 68ch; padding-bottom: 1.5rem; }
.corte { margin: 0 0 1.2rem; }
.corte img, .tarjeta > img, .portada img { width: 100%; height: auto; }
.prosa .corte { max-width: none; width: min(1080px, 100%); }
.entrada h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 20ch; }
.kicker { color: var(--bronce); letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }
.composicion {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1rem;
  align-items: start;
  padding-bottom: 2rem;
}
.columna, .lado { min-width: 0; }
.lado { color: var(--suave); }
.vinculos { list-style: none; padding: 0; }
.vinculos a { display: inline-block; margin: .25rem .8rem .25rem 0; }

.seda {
  border: 1px solid var(--bronce);
  background: var(--bronce);
  color: #1a140c;
  padding: .45rem .8rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.seda.claro { background: transparent; color: var(--bronce); }
form { display: grid; gap: .55rem; max-width: 24rem; margin: .6rem 0; }
input, textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--bronce);
  background: transparent;
  padding: .5rem 0;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .4rem .5rem .4rem 0; border-bottom: 1px solid var(--linea); }
.ok { color: var(--bronce); }

.pie {
  border-top: 1px solid var(--linea);
  padding: 1.6rem 0 2rem;
}
.pie-grid {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.pie a { color: var(--bronce); }
.legal a { display: inline-block; margin: .15rem .7rem .15rem 0; text-decoration: none; }

.edad, .velo {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 10, 14, .72);
}
.edad .panel, .velo .panel {
  width: min(26rem, 100%);
  background: var(--panel);
  border: 1px solid var(--linea);
  padding: 1.3rem;
}
.aviso {
  position: fixed;
  left: .8rem;
  bottom: .8rem;
  z-index: 55;
  width: min(22rem, calc(100vw - 1.6rem));
  background: var(--panel);
  border: 1px solid var(--linea);
  padding: .9rem 1rem;
}

@media (max-width: 860px) {
  .menu { display: inline-block; }
  .util { display: none; }
  .mapa { display: none; width: 100%; max-height: calc(100dvh - 7.5rem); overflow: auto; padding: .2rem 1rem 1rem; }
  .mapa.abierto { display: block; }
  .mapa details { width: 100%; }
  .caja, .mapa details:nth-last-child(-n+3) .caja {
    position: static;
    max-width: 100%;
    max-height: none;
    border: 0;
    background: transparent;
    padding: 0 0 .4rem .4rem;
  }
  .util-movil { display: grid; gap: .35rem; padding: .4rem 0 .8rem; }
  .util-movil a { color: var(--bronce); text-decoration: none; }
  .rejilla, .par, .composicion, .pie-grid { grid-template-columns: 1fr; }
  .marca-fila, .lengua, .util, .mapa { width: 100%; }
  .marca-fila { padding-left: 1rem; padding-right: 1rem; }
  .gestos { width: 100%; justify-content: flex-start; }
  .lengua { padding: 0 1rem .7rem; gap: .4rem; }
  .lengua button { flex: 1 1 30%; text-align: center; padding: .7rem .35rem; font-size: 1rem; }
  .marco { width: 100%; }
  .portada, .entrada, .prosa, .horas, .oficios, .lado { padding-left: 1rem; padding-right: 1rem; }
  .corte { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; margin-bottom: 1rem; }
  .corte img, .tarjeta > img {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .tarjeta { padding: 0 0 .9rem; }
  .tarjeta h2, .tarjeta p, .tarjeta a { margin-left: 1rem; margin-right: 1rem; }
  .rejilla, .par { padding-left: 0; padding-right: 0; gap: 1.2rem; }
}