/* Recorrido editorial de ASPROCOAN. Carga después del sitio actual.
   El mapa, su cámara y el bloqueo de entrada conservan su implementación. */
:root {
  --story-font: Georgia, 'Times New Roman', serif;
  --story-cream: #f4efdc;
  --story-gold: #e6d29a;
  --story-deep: #071f19;
}

/* La navegación aparece al terminar la entrada. */
.header {
  transition: opacity .5s ease, transform .5s ease, background-color .5s ease,
    color .5s ease, border-color .5s ease;
  opacity: 1;
  transform: translateY(0);
}
.js body.origin-map-visible > .header { opacity: 0; transform: translateY(-10px); }

/* Campo: misma voz editorial, con un final verde que enlaza con la oferta. */
#origen .harvest::after {
  background: linear-gradient(90deg, #071f1966, #071f1900 85%),
    linear-gradient(0deg, #071f19 0%, #071f19a6 12%, #071f1900 50%);
}
#origen .return-title { left: var(--gutter); }
#origen .return-title h2 { color: var(--story-cream); }
#origen .return-title h2 em { color: var(--story-gold); font-style: italic; }
#origen .return-title > .eyebrow { color: #e0e2d0; }
.field-scroll-cue {
  position: absolute; z-index: 3; bottom: 37px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 400 11px/1.4 var(--body); letter-spacing: .035em; color: var(--story-cream);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
  pointer-events: none;
}
.field-scroll-cue span { font-size: 18px; }
#origen .origin-complete .field-scroll-cue.is-visible { opacity: .85; visibility: visible; }

/* Oferta: mensaje y disponibilidad alineados sobre el video del puerto. */
#oferta { background: var(--story-deep); }
#oferta .offer-scene { height: 100svh; min-height: 760px; max-height: 1200px; background: var(--story-deep); }
#oferta .offer-scene::before {
  height: clamp(90px, 15svh, 170px); z-index: 0;
  background: linear-gradient(#071f19, #071f1900);
}
#oferta .offer-scene::after {
  height: clamp(160px, 25svh, 260px); z-index: 0;
  background: linear-gradient(#071f1900, #071f19);
}
#oferta .offer-backdrop video { object-position: center; }
#oferta .offer-shade {
  background: linear-gradient(90deg, #071f19d9 0%, #071f1980 32%, #071f1914 58%, #071f196b 100%),
    linear-gradient(0deg, #071f19bd 0%, #071f1926 35%, transparent 70%);
}
#oferta .offer-story {
  z-index: 1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, .85fr);
  width: 100%; max-width: none; margin: 0; height: 100%; min-height: inherit;
  align-items: center; column-gap: clamp(48px, 8vw, 170px);
  padding: 76px clamp(28px, 4vw, 76px) 90px;
}
#oferta .offer-intro { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; width: min(100%, 340px); padding: 0; }
#oferta .offer-quantity { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; color: var(--story-cream); }
#oferta .offer-quantity strong {
  display: block; font: 400 clamp(128px, 11vw, 184px)/.85 var(--display);
  letter-spacing: -.07em; color: var(--story-cream);
}
#oferta .offer-quantity span { display: block; margin-top: 22px; font: 600 15px/1.5 var(--display); letter-spacing: .16em; color: var(--story-cream); }
#oferta .offer-quantity small { display: block; margin: 0 0 28px; font: 500 13px/1.6 var(--body); letter-spacing: .1em; color: var(--story-cream); }
#oferta .offer-message { grid-column: 1; grid-row: 1; margin: 0; padding: 0; max-width: 850px; }
#oferta .offer-message h2 {
  font: 400 clamp(50px, 5vw, 88px)/1.04 var(--story-font);
  letter-spacing: -.045em; color: var(--story-cream); margin: 0;
}
#oferta .offer-message h2 em { font-style: italic; color: var(--story-gold); }
#oferta .offer-message p { margin-top: 28px; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.75; color: #edf0e5; }
#oferta .offer-message .button { margin-top: 30px; min-height: 56px; padding: 16px 28px; font-size: 16px; gap: 24px; }
#oferta .button.gold { background: var(--story-gold); color: #102c22; border-color: var(--story-gold); box-shadow: none; }
#oferta .button.gold:hover { background: var(--story-cream); }

/* Ficha: baja el ritmo; una hoja cálida sobre el mismo paisaje oscuro. */
#producto.product-beta { overflow: clip; background: var(--story-deep); color: var(--story-cream); }
#producto .beta-product-landscape img { opacity: .22; mask-image: linear-gradient(transparent, #000 30%, #000 78%, transparent); }
#producto .beta-product-landscape::after {
  background: linear-gradient(90deg, #071f19cc, #071f1966),
    linear-gradient(#071f19, #071f1900 32%, #071f19cc);
}
#producto .beta-product-layout {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(48px, 6vw, 100px); padding-block: 130px 130px;
}
#producto .beta-product-intro { position: sticky; top: calc(var(--header-h) + 48px); padding-top: 25px; max-width: 430px; }
#producto h2 {
  font: 400 clamp(48px, 4.9vw, 76px)/1.04 var(--story-font);
  letter-spacing: -.045em; color: var(--story-cream); margin: 0;
}
#producto h2 em { display: block; color: var(--story-gold); font-style: italic; }
#producto .beta-product-intro > p { color: #d4dfd3; font-size: 16px; line-height: 1.85; margin-top: 30px; }
#producto .beta-sheet {
  min-width: 0; background: #f4efdc; color: #193b2e; border: 1px solid #d6d7bb;
  border-radius: 6px; padding: clamp(26px, 3vw, 42px); box-shadow: 0 16px 50px #00100b26;
}
#producto .beta-sheet .eyebrow { font: 600 10px/1.5 var(--body); letter-spacing: .12em; color: #52694d; }
#producto .beta-sheet h3 { font: 500 32px/1.2 var(--display); letter-spacing: -.035em; margin: 13px 0 25px; }
#producto .beta-sheet caption { font-size: 12px; padding-bottom: 18px; color: #526550; }
#producto .beta-sheet table { font: 400 13px/1.65 var(--body); }
#producto .beta-sheet th, #producto .beta-sheet td { padding: 13px 0; border-color: #ced1b9; }
#producto .beta-sheet th { width: 35%; padding-right: 20px; font-weight: 650; }
#producto .beta-sheet-note { color: #4e644e; margin-top: 24px; }
#producto .beta-sheet-actions { gap: 22px; margin-top: 28px; }
#producto .beta-sheet-actions .button.gold { background: #153b2c; border-color: #153b2c; color: #f4efdc; }
#producto .beta-sheet-actions .button.gold:hover { background: #285541; }

@media (max-width: 1000px) {
  #oferta .offer-story { column-gap: 36px; grid-template-columns: minmax(0, 1.6fr) minmax(0, .75fr); }
  #oferta .offer-message h2 { font-size: clamp(42px, 5vw, 56px); }
  #oferta .offer-quantity strong { font-size: clamp(110px, 13vw, 140px); }
  #oferta .offer-quantity span { font-size: 13px; }
  #oferta .offer-quantity small { font-size: 11px; letter-spacing: .07em; }
  #producto .beta-product-layout { gap: 42px; }
}
@media (max-width: 900px) {
  #producto .beta-product-layout { grid-template-columns: 1fr; gap: 48px; padding-block: 90px 90px; }
  #producto .beta-product-intro { position: static; max-width: 580px; padding-top: 0; }
  #producto .beta-product-intro > p { max-width: 450px; }
  #producto .beta-sheet { width: 100%; max-width: 650px; }
}
@media (max-width: 700px) {
  #origen .return-title { left: 8vw; }
  #origen .return-title h2 { font-size: clamp(2.7rem, 11vw, 4.5rem); }
  .field-scroll-cue { bottom: 27px; font-size: 10px; gap: 10px; }
  #oferta .offer-scene { height: auto; min-height: 780px; max-height: none; }
  #oferta .offer-story {
    min-height: max(780px, calc(100svh - var(--header-h))); display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 42px; padding: 74px 24px 80px;
  }
  #oferta .offer-intro { order: 1; padding: 0; align-self: auto; width: 100%; }
  #oferta .offer-quantity { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; text-align: left; align-items: center; }
  #oferta .offer-quantity strong { grid-column: 1; grid-row: 1 / span 2; font-size: 100px; }
  #oferta .offer-quantity small { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 10px; letter-spacing: .06em; }
  #oferta .offer-quantity span { grid-column: 2; grid-row: 2; align-self: start; margin-top: 8px; font-size: 12px; }
  #oferta .offer-message { order: 0; width: 100%; }
  #oferta .offer-message h2 { font-size: clamp(34px, 9.6vw, 48px); line-height: 1.06; }
  #oferta .offer-message p { font-size: 15px; margin-top: 24px; }
  #oferta .offer-message .button { margin-top: 26px; min-height: 52px; padding: 15px 24px; font-size: 15px; }
  #oferta .offer-shade { background: linear-gradient(90deg, #071f19b3, #071f1959), linear-gradient(0deg, #071f19ed, #071f1980 65%, #071f1973); }
  #producto .beta-product-layout { padding-block: 85px 85px; }
  #producto h2 { font-size: clamp(44px, 10.5vw, 66px); }
  #producto .beta-product-intro > p { font-size: 15px; margin-top: 26px; }
  #producto .beta-sheet { padding: 28px 22px; }
  #producto .beta-sheet th { width: 34%; padding-right: 13px; font-size: 11px; overflow-wrap: break-word; }
  #producto .beta-sheet td { font-size: 12px; overflow-wrap: break-word; }
  #producto .beta-sheet-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .field-scroll-cue { transition: none; }
}