/* Saludo y newsletter independientes del enlace y el movimiento del header. */
@layer editorial {
  .feature-header:has(.header-greeting:not([hidden])) .feature-content { padding-bottom: 7.5rem; }
}
@layer components {
  .greeting-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header-greeting { position: absolute; z-index: 2; left: 50%; translate: -50% 0; bottom: 3.75rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .6rem .8rem; width: max-content; max-width: min(360px, calc(100% - 2 * var(--gutter))); color: var(--surface); }
  .header-greeting-hello { font: 400 1.9rem/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
  .header-name-toggle { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; justify-self: start; align-items: center; gap: .4rem; max-width: 100%; min-height: 44px; padding: .35rem .4rem; border: 1px dashed var(--brand-deep); border-radius: 14px; background: var(--surface); color: var(--brand-deep); cursor: pointer; font: 500 .78rem/1.4 var(--font); }
  .header-name-plus { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--neutral-surface); color: var(--ink); font: 500 1.3rem/1 var(--font); }
  .header-name-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .header-name-form { display: flex; align-items: center; gap: .55rem; min-width: 0; }
  .header-name-field { flex: 1; min-width: 0; margin: 0; }
  .header-name-field input { display: block; width: 100%; min-width: 0; height: 44px; padding: .5rem .7rem; border: 1px solid var(--surface); border-radius: 10px; background: var(--surface); color: var(--ink); font: 500 .78rem/1.4 var(--font); }
  .header-name-field input::placeholder { color: var(--brand-deep); opacity: 1; }
  .header-name-save { flex-shrink: 0; min-height: 44px; padding: .5rem .4rem; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--surface); font: 500 .64rem/1.4 var(--font); cursor: pointer; }
  .header-name-error { grid-column: 1 / -1; font: 500 .65rem/1.5 var(--font); }
  .header-greeting :is(button,input):focus-visible { outline: 2px solid var(--surface); outline-offset: 4px; }
  .header-name-toggle:hover { background: var(--neutral-surface); }

  .newsletter-card { position: fixed; inset: auto; left: max(1.25rem, env(safe-area-inset-left)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 50; width: min(350px, calc(100vw - 2.5rem)); max-height: calc(100dvh - 2.5rem); overflow-y: auto; margin: 0; padding: 1.6rem; border: 1px solid var(--muted-surface); border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px -22px #22221655; }
  .newsletter-card[data-open] { animation: newsletter-arrive .2s ease-out both; }
  .newsletter-card::backdrop { background: transparent; }
  .newsletter-close { position: absolute; top: .55rem; right: .55rem; display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 50%; background: transparent; color: var(--brand-deep); cursor: pointer; }
  .newsletter-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .newsletter-close:hover { background: color-mix(in srgb, var(--muted-surface) 35%, var(--surface)); }
  .newsletter-kicker { display: flex; align-items: center; gap: .5rem; margin-right: 1.5rem; font: 500 .55rem/1.5 var(--font); letter-spacing: .11em; color: var(--brand-deep); }
  .newsletter-kicker > span { font-size: 1.2rem; line-height: 1; }
  .newsletter-card h2 { margin-top: 1.2rem; font: 400 2rem/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .newsletter-copy { margin-top: .75rem; font: 500 .75rem/1.7 var(--font); color: var(--brand-deep); }
  .newsletter-form { display: grid; gap: .6rem; margin-top: 1.35rem; }
  .newsletter-form > label { margin: 0; font: 500 .66rem/1.5 var(--font); }
  .newsletter-form > input { width: 100%; min-width: 0; min-height: 44px; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--neutral-surface) 45%, var(--surface)); color: var(--ink); font: 500 .75rem/1.5 var(--font); }
  .newsletter-form > input::placeholder { color: var(--brand-deep); opacity: .8; }
  .newsletter-submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .75rem .9rem; border: 0; border-radius: 10px; background: var(--brand-deep); color: var(--surface); font: 500 .72rem/1.5 var(--font); cursor: pointer; }
  .newsletter-submit > span { font-size: 1rem; line-height: 1; }
  .newsletter-submit:disabled { opacity: .65; cursor: default; }
  .newsletter-availability { font: 500 .59rem/1.6 var(--font); color: var(--brand-deep); }
  .newsletter-card :is(button,input):focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
  @keyframes newsletter-arrive { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
  @media (max-width: 760px) { .header-name-field input, .newsletter-form > input { font-size: 1rem; } }
  @media (max-width: 400px) {
    .header-greeting-hello { font-size: 1.65rem; }
    .header-greeting { gap: .6rem; }
    .newsletter-card { width: calc(100vw - 2rem); left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); max-height: calc(100dvh - 2rem); padding: 1.35rem; }
  }
  @media (max-width: 640px) { .newsletter-card { bottom: max(5.25rem, env(safe-area-inset-bottom)); max-height: calc(100dvh - 6.25rem); } }
  @media (prefers-reduced-motion: reduce) { .newsletter-card[data-open] { animation: none; } }
  @media print { .header-greeting, .newsletter-card { display: none !important; } }
}