/* ============================================================================
   SECTOR 28 v3.4 — Delights on-brand
   - Selection color sodio
   - Línea dorada delgada entre acto y banda cross-mark + shine ocasional
   - Print stylesheet (cuento limpio en hoja)
   ============================================================================ */

/* Selection: sodio sobre ink */
::selection {
  background: rgba(255, 177, 56, 0.85);
  color: var(--s28-ink);
}
::-moz-selection {
  background: rgba(255, 177, 56, 0.85);
  color: var(--s28-ink);
}

/* ─────────────────────────────────────────────────────────────────
   THIN GOLD LINE + SHINE · Entre acto y su banda cross-mark
   (Reemplaza el page-fold corner)
───────────────────────────────────────────────────────────────── */

.plano--skyline,
.plano--cafetismo,
.plano--panypizza {
  position: relative;
}

/* Override del ::after que tenían el page-fold — ahora es línea delgada dorada */
.plano--skyline::after,
.plano--cafetismo::after,
.plano--panypizza::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 177, 56, 0.25) 15%,
    rgba(255, 177, 56, 0.55) 50%,
    rgba(255, 177, 56, 0.25) 85%,
    transparent 100%) !important;
  clip-path: none !important;
  filter: none !important;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

/* Shine: barrido sodio brillante que pasa cada X tiempo sobre la línea */
.plano--skyline::before,
.plano--cafetismo::before,
.plano--panypizza::before {
  content: "" !important;
  position: absolute !important;
  bottom: -1px;
  left: 0; right: auto; top: auto;
  width: 28%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 220, 140, 0.0) 10%,
    rgba(255, 220, 140, 1) 50%,
    rgba(255, 220, 140, 0.0) 90%,
    transparent 100%) !important;
  filter: blur(0.4px) drop-shadow(0 0 4px rgba(255, 200, 100, 0.7));
  animation: planoShine 18s ease-in-out infinite;
  z-index: 6;
  pointer-events: none;
}

/* Cada plano arranca el shine en momento distinto para que no se sincronicen */
.plano--cafetismo::before { animation-delay: -6s; }
.plano--panypizza::before { animation-delay: -12s; }

@keyframes planoShine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  3% { opacity: 1; }
  10% {
    transform: translateX(370%);
    opacity: 1;
  }
  12%, 100% {
    transform: translateX(370%);
    opacity: 0;
  }
}

/* Banda cross-mark sin sombra superior agresiva (la línea dorada hace el trabajo) */
.plano--skyline + .band-cross,
.plano--cafetismo + .band-cross,
.plano--panypizza + .band-cross {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .plano--skyline::before,
  .plano--cafetismo::before,
  .plano--panypizza::before {
    animation: none;
    opacity: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   PRINT STYLESHEET · El cuento se imprime como primera entrega
───────────────────────────────────────────────────────────────── */
@media print {
  @page {
    margin: 2cm 1.8cm;
    size: A4;
  }

  body {
    background: white !important;
    color: #1a1a1a !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 11pt;
    line-height: 1.65;
  }

  /* FORZAR opacity: 1 y reset transforms — GSAP deja todo invisible en print */
  *, *::before, *::after {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  /* Hide everything that isn't el cuento + footer cita */
  .nav,
  .scroll-progress,
  .lateral-chip,
  .skip-link,
  .plano--hero,
  .plano--descontaminacion,
  .plano-divider,
  .plano__bg,
  .plano__scrim,
  .plano--lore,
  .plano--bahia,
  .band-cross,
  .site-footer,
  .hero-hint,
  .cuento__separador,
  video,
  iframe {
    display: none !important;
  }

  /* Quitar el thin gold line + shine en print */
  .plano--skyline::before,
  .plano--skyline::after,
  .plano--cafetismo::before,
  .plano--cafetismo::after,
  .plano--panypizza::before,
  .plano--panypizza::after {
    display: none !important;
    content: none !important;
  }

  /* Solo conservamos los 4 actos del cuento + cita final */
  .plano--cinturon,
  .plano--skyline,
  .plano--cafetismo,
  .plano--panypizza,
  .footer-quote {
    position: static !important;
    display: block !important;
    min-height: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    page-break-inside: avoid;
    margin-bottom: 14pt;
  }

  .plano__content,
  .plano__content--left,
  .plano__content--right,
  .plano__inner,
  .plano__inner--narrow {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    width: 100% !important;
    display: block !important;
    justify-content: flex-start !important;
  }

  /* Header del cuento (solo aparece en plano--cinturon) */
  .plano--cinturon .cuento__header {
    text-align: center;
    margin: 0 0 24pt !important;
    padding-bottom: 12pt;
    border-bottom: 0.5pt solid #333;
  }
  .cuento__serie {
    font-family: 'Courier New', monospace !important;
    font-size: 8pt !important;
    letter-spacing: 0.18em;
    color: #666 !important;
    margin: 0 0 10pt !important;
    text-transform: uppercase;
  }
  .cuento__titulo {
    font-style: italic;
    font-weight: 400 !important;
    font-size: 22pt !important;
    color: #1a1a1a !important;
    margin: 0 0 6pt !important;
    line-height: 1.1;
  }
  .cuento__autor {
    font-style: italic;
    font-size: 10pt !important;
    color: #555 !important;
  }
  .cuento__divisor { display: none !important; }

  /* Body del cuento */
  .cuento__parrafo,
  .acto-text p {
    color: #1a1a1a !important;
    font-size: 11pt !important;
    line-height: 1.7 !important;
    margin: 0 0 9pt !important;
    text-align: justify;
    hyphens: auto;
    max-width: none !important;
  }
  .cuento__parrafo--dropcap::first-letter {
    color: #c08a1a !important;
    font-size: 3.5em;
    line-height: 0.85;
    float: left;
    padding: 4pt 6pt 0 0;
    font-style: italic;
  }

  /* Pull quote en print */
  .cuento__pullquote,
  .plano--skyline .cuento__pullquote {
    margin: 16pt 3cm !important;
    padding: 0 !important;
    text-align: center;
    page-break-inside: avoid;
  }
  .cuento__pullquote::before,
  .plano--skyline .cuento__pullquote::before { display: none !important; }
  .cuento__pullquote p,
  .plano--skyline .cuento__pullquote p {
    font-style: italic !important;
    font-size: 13pt !important;
    color: #c08a1a !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* Cierre del cuento */
  .cuento__cierre {
    font-style: italic;
    margin-top: 12pt !important;
  }

  /* Card oscura del Skyline NO debe aparecer en print */
  .plano--skyline .plano__content--right .plano__inner {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Cierre del último acto sin margin-bottom (no empujar a página huérfana) */
  .plano--panypizza {
    margin-bottom: 0 !important;
  }

  /* Footer cita final + URL — todo junto, una sola "página de cierre" */
  .footer-quote {
    margin-top: 18pt !important;
    padding: 12pt 0 0 !important;
    border-top: 0.5pt solid #333;
    text-align: center;
    page-break-before: avoid;
    page-break-inside: avoid;
    page-break-after: avoid;
  }
  .footer-quote__bg,
  .footer-quote__scrim { display: none !important; }
  .footer-quote blockquote {
    margin: 0 !important;
  }
  .footer-quote blockquote p {
    font-style: italic;
    font-size: 13pt !important;
    color: #1a1a1a !important;
    line-height: 1.4;
    margin: 0 0 8pt;
  }
  .footer-quote cite {
    font-family: 'Courier New', monospace !important;
    font-size: 8pt !important;
    letter-spacing: 0.14em;
    color: #666 !important;
    text-transform: uppercase;
    font-style: normal;
    display: block;
  }
  /* URL fuente como parte del cite — NO en body::after (que se iba a su propia página) */
  .footer-quote cite::after {
    content: "  ·  Léelo en sector28.mx  ·  Cervecería Skyline · Cafetismo · Salvo Pan y Pizza · Valle de Bravo";
    color: #999;
  }

  /* Asegurar que no haya elementos huérfanos */
  html, body {
    orphans: 4 !important;
    widows: 4 !important;
  }
  body { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  body::after { content: none !important; display: none !important; }

  a[href]::after { content: none !important; }
}