:root{
  --papel:#e9ebe4;
  --tinta:#141a16;
  --tinta-media:#4a544c;
  --tinta-tenue:#5e645f;
  --plotter:#c1381f;
  --plotter-texto:#b5341d;
  --rejilla:rgba(20,26,22,.055);
  --linea:rgba(20,26,22,.14);
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#0e1311;
    --tinta:#e6eae3;
    --tinta-media:#9aa39b;
    --tinta-tenue:#7e867f;
    --plotter:#e8563a;
    --plotter-texto:#e8563a;
    --rejilla:rgba(230,234,227,.05);
    --linea:rgba(230,234,227,.14);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  background-color:var(--papel);
  background-image:
    linear-gradient(var(--rejilla) 1px,transparent 1px),
    linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);
  background-size:22px 22px;
  color:var(--tinta);
  font-family:"Newsreader",ui-serif,Georgia,serif;
  font-size:clamp(17px,.5vw + 15px,19px);
  line-height:1.6;
  font-weight:300;
  display:flex;
  flex-direction:column;
}
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}
.envoltorio{
  width:min(1280px,100%);
  margin:0 auto;
  padding:clamp(22px,3.4vw,48px);
  flex:1;
  display:flex;
  flex-direction:column;
  gap:clamp(30px,5vh,52px);
}

.cabecera{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.marca{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:1.06rem;letter-spacing:-.025em;margin:0;
}
.marca .amp{color:var(--plotter-texto);font-weight:500;padding:0 .04em}
.estado{color:var(--tinta-tenue);margin:0}
.estado b{font-weight:500;color:var(--plotter-texto)}

/* --- el bloque central: el titular manda, el apunte se descuelga --- */
.principal{
  flex:1;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-content:center;
  gap:clamp(26px,3vw,44px) clamp(20px,2.5vw,40px);
}
.titular{
  grid-column:1 / 10;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(2.05rem,5.1vw,4.35rem);
  line-height:1.02;
  letter-spacing:-.036em;
  margin:0;
  text-wrap:balance;
}
.titular em{font-style:normal;color:var(--plotter)}
.apunte{grid-column:7 / -1;max-width:none}
.apunte p{margin:0 0 1em}
.apunte p:last-child{margin:0}

.contacto{padding-top:22px;border-top:1px solid var(--linea)}
.contacto .etiqueta{color:var(--tinta-tenue);display:block;margin-bottom:.75em}
.correo{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  letter-spacing:-.025em;
  color:var(--tinta);
  text-decoration:none;
  box-shadow:inset 0 -2px 0 0 var(--plotter);
  transition:color .2s ease;
}
.correo:hover,.correo:focus-visible{color:var(--plotter-texto)}
a:focus-visible{outline:2px solid var(--plotter);outline-offset:5px;border-radius:2px}


@media (max-width:820px){
  .titular{grid-column:1 / -1}
  .apunte{grid-column:1 / -1;max-width:38ch}
  /* sin esto el bloque central crece y deja dos bolsas de vacio de ~200px */
  .principal{flex:0 1 auto;align-content:start}
  .envoltorio{justify-content:flex-start;gap:clamp(26px,4vh,40px)}
}

/* --- entrada: una sola cascada, corta --- */
@media (prefers-reduced-motion:no-preference){
  .cabecera,.titular,.apunte,.contacto{
    opacity:0;transform:translateY(14px);
    animation:entrar .75s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .cabecera{animation-delay:.05s}
  .titular{animation-delay:.16s}
  .apunte{animation-delay:.30s}
  .contacto{animation-delay:.42s}
  @keyframes entrar{to{opacity:1;transform:none}}
}