/* El membrete de la agencia (H1). Lo usan la vista previa de Ajustes y la hoja que imprime el
   servicio de PDF: todo lo que lo dibuja está aquí, con su propia letra, márgenes y caja, para que
   el CSS del portal no lo cambie y el PDF salga igual a la vista previa. */
.membrete {
  --m-principal: #B3432B;
  --m-secundario: #A8864F;
  --m-acento: #B3432B;
  color: #1B2433;
  font: 400 13px/1.5 'Instrument Sans', system-ui, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.membrete, .membrete * { box-sizing: border-box; }
.membrete p, .membrete ul { margin: 0; padding: 0; }
.membrete__pagina {
  width: 8.5in; min-height: 11in; padding: 0.55in 0.65in 0.5in;
  background: #FFFDF8; display: flex; flex-direction: column;
}
.membrete__cabeza { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.membrete__logo { display: block; max-width: 1.6in; max-height: 0.9in; object-fit: contain; }
.membrete__sello {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--m-secundario); color: var(--m-acento);
  font: italic 600 22px/1 'Fraunces', Georgia, serif;
  box-shadow: 0 0 0 4px #FFFDF8, 0 0 0 5.5px var(--m-secundario);
}
.membrete__nombre { font: 600 24px/1.1 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.membrete__eslogan { margin-top: 4px; font: italic 400 15px/1.3 'Fraunces', Georgia, serif; color: var(--m-acento); }
/* Ancho fijo (no crece con el contenido): una red social o un correo muy largos no le quitan el
   espacio al nombre de la agencia (el nombre lo necesita: la columna del medio es 1fr). */
.membrete__contacto { list-style: none; text-align: right; font: 400 10.5px/1.6 'IBM Plex Mono', monospace; color: #4B4A48; max-width: 2.9in; min-width: 0; }
.membrete__contacto span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #9A8B76; }
.membrete__contacto a { color: var(--m-acento); text-decoration: none; }
/* Lo que no cabe en el ancho fijo se recorta con «…»: el enlace real (href) queda completo, solo se
   acorta lo que se lee. */
.membrete__contacto li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membrete__red a { display: inline-flex; align-items: center; gap: 4px; }
.membrete__red-icono { width: 11px; height: 11px; flex: none; }
.membrete__franja {
  margin-top: 18px; height: 10px;
  background: linear-gradient(var(--m-principal) 0 5px, transparent 5px 7px, var(--m-secundario) 7px 9px, transparent 9px);
}
.membrete__cuerpo { flex: 1; padding: 0.6in 0 0.4in; }
.membrete__rotulo { margin-bottom: 8px; font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #9A8B76; }
.membrete__titulo { margin-bottom: 12px; font: 400 34px/1.05 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.membrete__texto { max-width: 5.2in; font-size: 13px; line-height: 1.6; color: #4B4A48; }
.membrete__pie { border-top: 1px solid rgba(27, 36, 51, .18); padding-top: 12px; display: grid; gap: 6px; font-size: 9.5px; line-height: 1.5; color: #4B4A48; }
.membrete__condiciones { white-space: pre-line; }
.membrete__licencia { font: 600 9px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #1B2433; }
/* Un texto largo sin espacios (una licencia, un enlace) se parte en vez de salirse de la hoja.
   .membrete__contacto no va aquí: sus líneas usan «white-space: nowrap» + elipsis (arriba), no partido. */
.membrete__marca { min-width: 0; }
.membrete__nombre, .membrete__eslogan, .membrete__condiciones, .membrete__licencia { overflow-wrap: anywhere; }

@page { size: letter; margin: 0; }
@media print {
  html, body { margin: 0; background: #FFFDF8; }
  /* A propósito: con todos los textos en su tope, lo que no cabe en una hoja carta se recorta (no se
     ve), en vez de abrir una segunda página. Una hoja siempre, aunque algo quede afuera. */
  .membrete__pagina { height: 11in; overflow: hidden; }
}