/* ============================================================
   apertura — bloque 1 (hero)
   Anatomy unlike siblings: portada editorial asimétrica.
   Columna de texto angosta a la izquierda con folio volado al
   margen + retrato a sangre a la derecha, montado sobre el
   fieltro. Titular en serif con acento en cursiva. Capitular
   en la entrada. Nada se repetirá igual en bloques siguientes.
   ============================================================ */

.apertura {
  position: relative;
  padding-top: clamp(7rem, 12vw, 10rem);   /* deja sitio a la cabecera fija */
  padding-bottom: var(--aire-xl);
  overflow: hidden;
}

.apertura__reja {
  max-width: 86rem;
  margin-inline: auto;
  padding-inline: var(--canal);
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

/* — columna editorial — */
.apertura__decir { position: relative; }

.apertura__folio { margin-bottom: var(--aire-s); }

.apertura__titular {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--marfil);
  margin-bottom: var(--aire-s);
}
.apertura__titular em {              /* acento en cursiva — gesto "a mano" */
  font-style: italic;
  font-weight: 400;
  color: var(--esmeralda-viva);
}

.apertura__guia {
  font-size: var(--t-guia);
  line-height: 1.55;
  color: var(--marfil-medio);
  max-width: 34ch;
  margin-bottom: var(--aire-m);
}
.apertura__guia::first-letter {      /* capitular editorial */
  font-family: var(--serif);
  font-size: 3.1em;
  float: left;
  line-height: .82;
  padding: .04em .14em 0 0;
  color: var(--oro);
  font-weight: 600;
}

.apertura__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aire-xs);
  margin-bottom: var(--aire-m);
}

/* credencial — sello legal, pie de la portada */
.apertura__sello {
  font-size: var(--t-micro);
  color: var(--marfil-tenue);
  line-height: 1.4;
  border-top: 1px solid var(--linde-suave);
  padding-top: var(--aire-s);
  max-width: 38ch;
}

/* — retrato a sangre — */
.apertura__retrato {
  position: relative;
  justify-self: end;
  width: 100%;
}
.apertura__retrato img {
  width: 100%;
  border-radius: var(--radio);
  object-fit: cover;
  box-shadow: var(--sombra-mesa);
}
/* hilo de oro descuadrado tras el retrato — asimetría a propósito */
.apertura__retrato::before {
  content: "";
  position: absolute;
  inset: -14px auto auto -14px;
  width: 46%; height: 46%;
  border-top: 1px solid var(--oro-tenue);
  border-left: 1px solid var(--oro-tenue);
  border-radius: 6px 0 0 0;
}
/* viñeta esmeralda inferior para fundir el retrato con el fieltro */
.apertura__retrato::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(6,19,12,.55), transparent);
  border-radius: 0 0 var(--radio) var(--radio);
  pointer-events: none;
}

@media (max-width: 880px) {
  .apertura__reja { grid-template-columns: 1fr; gap: var(--aire-m); }
  .apertura__retrato { order: -1; max-width: 30rem; justify-self: start; }
  .apertura__guia { max-width: none; }
}