/* Tira «El fuego, el lastre y el horizonte» · Ela y POE · Destransformando. Todo bajo .tira-ela. */
  .tira-ela {
    --papel: #F4EEE3; --tinta: #221F1D; --linea: #2A2522; --acento: #C4400F;
    --gris: #4A433D; --gris-2: #5A524B; --gris-3: #6B6058; --filete: #C9BEB3;
    --gap: clamp(14px, 1.6vw, 24px);
    width: 100%; box-sizing: border-box; background: var(--papel);
    padding: clamp(24px, 4vw, 56px) var(--pad-x);
    font-family: 'EB Garamond', serif; display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 36px);
  }
  .tira-ela * { box-sizing: border-box; }
  .tira-ela__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
  .tira-ela__marca { display: flex; flex-direction: column; gap: 10px; }
  .tira-ela__logo { display: flex; align-items: baseline; gap: 14px; color: var(--linea); }
  .tira-ela__logo-ela { font-family: 'EB Garamond', serif; font-style: italic; font-size: clamp(34px, 4vw, 52px); line-height: 1; }
  .tira-ela__logo-y { font-family: 'EB Garamond', serif; font-style: italic; font-size: clamp(18px, 2vw, 26px); color: var(--gris-3); }
  .tira-ela__logo-poe { font-family: 'DM Mono', monospace; font-size: clamp(20px, 2.4vw, 31px); letter-spacing: .22em; }
  .tira-ela__serie { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .36em; color: var(--acento); }
  .tira-ela__titulo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .tira-ela__titulo h2 { margin: 0; font-family: 'EB Garamond', serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; color: var(--tinta); text-align: right; }
  .tira-ela__titulo span { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .24em; color: var(--gris-2); }
  .tira-ela__rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(max(220px, calc((100% - 3 * var(--gap)) / 3)), 1fr)); }
  .tira-ela__vineta { margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .tira-ela__marco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1.5px solid var(--linea); background: var(--papel); }
  .tira-ela__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .tira-ela__marco .tira-ela__firma { inset: auto; right: 4%; top: 5%; width: 18%; height: auto; object-fit: contain; opacity: .95; }
  .tira-ela__pie { display: flex; gap: 12px; align-items: baseline; }
  .tira-ela__num { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; color: var(--acento); }
  .tira-ela__texto { display: flex; flex-direction: column; gap: 4px; }
  .tira-ela__momento { font-family: 'EB Garamond', serif; font-style: italic; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; color: var(--tinta); }
  .tira-ela__frase { font-family: 'EB Garamond', serif; font-weight: 400; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; color: #423e37; text-wrap: pretty; }
  .tira-ela__cierre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--filete);
    font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .3em; color: var(--gris-3); }

  /* Móvil (< 700 px): las 6 viñetas en una fila que se desliza de lado, con la siguiente asomando */
  @media (max-width: 699px) {
    .tira-ela__rejilla {
      display: flex; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); -webkit-overflow-scrolling: touch;
      margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x);
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .tira-ela__rejilla::-webkit-scrollbar { display: none; }
    .tira-ela__rejilla > li { flex: 0 0 82vw; min-width: 0; scroll-snap-align: start; }
  }