/* V30 · Corrección robusta del video + experiencia histórica 80/20 */
:root {
  --story-accent: #c89a45;
  --story-secondary: #198e88;
  --story-pattern: url('../ornaments/23_olinala-band.svg');
  --story-deep: #100b08;
  --story-paper: #f5ead0;
}

/* HERO VIDEO: sin bordes, sin recorte, sin residuos de estilos previos */
.launch-home .launch-hero-media {
  position: relative;
  width: min(100%, 880px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 20px;
  background: #070605 !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
  isolation: isolate;
}
.launch-home .launch-hero-media::before,
.launch-home .launch-hero-media::after {
  display: none !important;
  content: none !important;
}
.launch-home .launch-poster,
.launch-home .launch-hero-media video {
  grid-area: 1 / 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  border: 0 !important;
  outline: 0 !important;
  border-radius: inherit;
  object-fit: contain !important;
  object-position: center center !important;
  background: #070605 !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.launch-home .launch-poster img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  outline: 0 !important;
  image-rendering: auto;
}
.launch-home .launch-hero-media video {
  opacity: 0;
  transition: opacity .22s ease;
}
.launch-home .launch-hero-media.is-video-ready video { opacity: 1; }
.launch-home .launch-hero-media.is-video-ready .launch-poster { opacity: 0; }
.launch-home .launch-hero-media.is-video-loading::after {
  display: block !important;
  content: '' !important;
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.72);
  animation: heroVideoSpin .8s linear infinite;
}
@keyframes heroVideoSpin { to { transform: rotate(360deg); } }
.launch-home .video-fallback {
  z-index: 5;
  inset: auto 12px 12px;
  width: auto;
  text-align: center;
  border-radius: 12px;
}
.video-retry {
  display: none;
  position: absolute;
  z-index: 6;
  inset: auto 50% 18px auto;
  transform: translateX(50%);
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(248,239,217,.32);
  border-radius: 999px;
  background: rgba(8,7,6,.88);
  color: #f8efd9;
  font: 800 12px/1 var(--font-body);
  cursor: pointer;
}
.launch-hero-media.has-video-error .video-retry { display: inline-flex; align-items: center; }
.launch-hero-media.has-video-error .video-fallback { display: block; bottom: 68px; }

@media (min-width: 900px) {
  .launch-home .launch-hero-media {
    width: min(100%, 880px) !important;
    aspect-ratio: 16 / 9;
    max-height: min(49vh, 495px) !important;
  }
}
@media (max-width: 899px) {
  .launch-home .launch-hero-media {
    width: min(100%, 512px) !important;
    aspect-ratio: 512 / 646;
    max-height: 48vh !important;
  }
}

/* Tema por historia */
.product-page[data-product-theme="diablos-negros"] {
  --story-accent: #d64334;
  --story-secondary: #0b817a;
  --story-pattern: url('../ornaments/25_diablos-negros.svg');
  --story-deep: #120908;
}
.product-page[data-product-theme="diablo-de-teloloapan"] {
  --story-accent: #e2383f;
  --story-secondary: #00a09a;
  --story-pattern: url('../ornaments/25_diablo-teloloapan.svg');
  --story-deep: #100707;
}
.product-page[data-product-theme="ritual-de-sangre"] {
  --story-accent: #d9aa2f;
  --story-secondary: #0a8f88;
  --story-pattern: url('../ornaments/25_ritual-zitlala.svg');
  --story-deep: #100b05;
}
.product-page[data-product-theme="porrazo-de-tigres"] {
  --story-accent: #d65a2e;
  --story-secondary: #07969b;
  --story-pattern: url('../ornaments/25_porrazos.svg');
  --story-deep: #100906;
}

/* Primer bloque: 80% experiencia / 20% compra */
.story-product-shell {
  padding: 0 max(10px, calc((100vw - 1240px)/2)) 5px;
  background: #080604;
}
.story-product-shell .breadcrumbs {
  padding: 14px 8px 12px;
  color: rgba(255,245,220,.62);
}
.story-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr);
  gap: 5px;
  align-items: stretch;
}
.story-product-stage {
  position: relative;
  min-height: min(76vh, 760px);
  overflow: hidden;
  border-radius: 22px 6px 6px 22px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.055), transparent 48%),
    linear-gradient(150deg, var(--story-deep), #080604 72%);
  box-shadow: inset 0 0 0 1px rgba(255,245,220,.07);
}
.story-product-stage::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    var(--story-pattern) center top / auto 54px repeat-x,
    linear-gradient(90deg, transparent 0 58%, rgba(8,6,4,.82) 92%);
  opacity: .2;
  pointer-events: none;
}
.story-product-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px min(38%, 420px) 24px 20px;
}
.story-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 690px;
  max-height: 700px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.3));
}
.story-product-overlay {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(22px, 4vw, 62px);
  width: min(37%, 410px);
  transform: translateY(-50%);
}
.story-product-region {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--story-accent) 55%, transparent);
  border-radius: 999px;
  color: #f8efd9;
  background: rgba(8,6,4,.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.story-product-overlay h1 {
  margin: 18px 0 8px;
  color: #f8efd9;
  font-size: clamp(54px, 6vw, 92px);
  line-height: .86;
  letter-spacing: -.03em;
}
.story-product-phrase {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--story-accent) 76%, #f8efd9);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 46px);
  line-height: .94;
}
.story-product-summary {
  margin: 0;
  color: rgba(248,239,217,.76);
  font-size: 14px;
  line-height: 1.7;
}
.story-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}
.story-keywords span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(248,239,217,.76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-buy-rail {
  position: sticky;
  top: 88px;
  align-self: start;
  min-height: 100%;
  padding: 22px 17px;
  border-radius: 6px 22px 22px 6px;
  background:
    linear-gradient(180deg, rgba(18,13,9,.99), rgba(8,6,4,.99)),
    var(--story-pattern) top center / auto 46px repeat-x;
  box-shadow: inset 0 0 0 1px rgba(255,245,220,.08);
}
.buy-mini-label {
  color: var(--story-secondary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.buy-mini-title {
  margin: 9px 0 10px;
  color: #f8efd9;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.3vw, 35px);
  line-height: .9;
}
.buy-mini-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 15px;
}
.buy-mini-price strong { color: #fff0bd; font-size: 28px; }
.buy-mini-price del { color: rgba(255,245,220,.42); font-size: 12px; }
.buy-mini-price span {
  display: block;
  color: rgba(255,245,220,.65);
  font-size: 9px;
}
.buy-mini-controls {
  display: grid;
  grid-template-columns: 1fr 62px;
  gap: 6px;
}
.buy-mini-controls label { display: grid; gap: 4px; }
.buy-mini-controls label > span {
  color: rgba(255,245,220,.68);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.buy-mini-controls select,
.buy-mini-controls input {
  width: 100%;
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(236,211,147,.34);
  border-radius: 9px;
  background: #fff5d8;
  color: #17100b;
  padding-inline: 8px;
  font: 700 12px/1 var(--font-body);
}
.buy-mini-controls .btn {
  grid-column: 1 / -1;
  min-height: 42px;
  margin-top: 2px;
  padding-inline: 10px;
  font-size: 10px;
}
.buy-mini-details {
  margin-top: 13px;
  border-top: 1px solid rgba(255,245,220,.1);
}
.buy-mini-details summary {
  padding: 12px 0 5px;
  color: rgba(255,245,220,.7);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.buy-mini-details p {
  margin: 5px 0 8px;
  color: rgba(255,245,220,.55);
  font-size: 9px;
  line-height: 1.55;
}
.buy-mini-details a {
  color: #79d2cc;
  font-size: 10px;
  font-weight: 800;
}

/* Índice útil de lectura */
.story-index {
  position: sticky;
  z-index: 30;
  top: 70px;
  display: flex;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  padding: 7px max(10px, calc((100vw - 1180px)/2));
  background: rgba(8,6,4,.92);
  border-top: 1px solid rgba(255,245,220,.06);
  border-bottom: 1px solid rgba(255,245,220,.1);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.story-index::-webkit-scrollbar { display: none; }
.story-index a {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  color: rgba(248,239,217,.7);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.story-index a:hover,
.story-index a:focus-visible {
  background: color-mix(in srgb, var(--story-accent) 18%, transparent);
  color: #fff3d8;
}

/* Historia como protagonista */
.product-page .wearing-story,
.product-page .history-context,
.product-page .documentary-section,
.product-page .design-symbols,
.product-page .design-process,
.product-page .full-history,
.product-page .sources-section,
.product-page .history-closing {
  position: relative;
  overflow: hidden;
}
.product-page .wearing-story {
  min-height: min(72vh, 720px);
  align-items: center;
  background:
    linear-gradient(110deg, rgba(245,234,208,.98), rgba(235,215,174,.96)),
    var(--story-pattern) center / auto 64px repeat-x;
}
.product-page .wearing-story::after {
  content: '';
  position: absolute;
  right: -8vw;
  bottom: -16vw;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--story-accent) 18%, transparent), transparent 68%);
}
.product-page .wearing-story > * { position: relative; z-index: 1; }
.product-page .wearing-story h2 {
  max-width: 900px;
  font-size: clamp(54px, 7vw, 108px);
  letter-spacing: -.035em;
}
.product-page .wearing-story p {
  max-width: 880px;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.78;
}
.product-page .story-number {
  color: color-mix(in srgb, var(--story-accent) 28%, transparent);
}
.product-page .history-context {
  gap: 5px;
  background: #080604;
}
.product-page .history-context article {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 7vw, 96px);
  border-top: 8px solid var(--story-accent);
}
.product-page .history-context article:nth-child(2) {
  border-top-color: var(--story-secondary);
}
.product-page .history-context h2 {
  font-size: clamp(40px, 4.6vw, 70px);
  max-width: 720px;
}
.product-page .history-context p {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.86;
}
.product-page .documentary-section {
  min-height: 520px;
  background:
    linear-gradient(90deg, rgba(7,5,4,.97), rgba(12,8,6,.88)),
    var(--story-pattern) right center / auto 90px repeat-y;
}
.product-page .documentary-section::before {
  content: '▶';
  position: absolute;
  right: clamp(20px, 8vw, 110px);
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--story-accent) 18%, transparent);
  font-size: clamp(130px, 22vw, 300px);
  line-height: 1;
}
.product-page .documentary-section > * { position: relative; z-index: 1; }
.product-page .documentary-actions { max-width: 360px; }
.product-page .design-symbols {
  background:
    linear-gradient(180deg, rgba(245,234,208,.98), rgba(233,215,175,.97)),
    var(--story-pattern) top center / auto 58px repeat-x;
}
.product-page .symbol-grid {
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-auto-flow: dense;
}
.product-page .symbol-grid article {
  grid-column: span 4;
  min-height: 230px;
  border-top: 5px solid var(--story-accent);
  background: rgba(255,250,238,.78);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-page .symbol-grid article:nth-child(2n) { border-top-color: var(--story-secondary); }
.product-page .symbol-grid article:nth-child(1),
.product-page .symbol-grid article:nth-child(5) { grid-column: span 6; }
.product-page .symbol-grid article:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(60,35,18,.12); }
.product-page .design-process {
  min-height: 560px;
  align-items: center;
  background:
    linear-gradient(110deg, rgba(10,7,5,.98), rgba(20,12,8,.95)),
    var(--story-pattern) left center / auto 86px repeat-y;
}
.product-page .design-process h2 {
  font-size: clamp(56px, 7vw, 96px);
}
.product-page .design-process p {
  padding: clamp(24px, 4vw, 52px);
  border-left: 5px solid var(--story-accent);
  background: rgba(255,255,255,.025);
}
.product-page .full-history {
  background:
    linear-gradient(180deg, rgba(245,234,208,.99), rgba(235,217,180,.98)),
    var(--story-pattern) top center / auto 62px repeat-x;
}
.product-page .history-chapter summary span { color: var(--story-accent); }
.product-page .history-chapter[open] summary { color: color-mix(in srgb, var(--story-accent) 75%, #21150d); }
.product-page .sources-section {
  background: linear-gradient(135deg, #080604, var(--story-deep));
}
.product-page .rich-source-list a:hover { color: color-mix(in srgb, var(--story-accent) 70%, #fff3d8); }
.product-page .history-closing {
  min-height: 480px;
  display: grid;
  place-content: center;
  background:
    linear-gradient(180deg, rgba(245,234,208,.97), rgba(230,207,159,.97)),
    var(--story-pattern) center bottom / auto 72px repeat-x;
}
.product-page .history-closing h2 {
  font-size: clamp(58px, 8vw, 112px);
  letter-spacing: -.04em;
}
.product-page .related-section { margin-top: 5px !important; }

/* fallback sin JS también reduce el bloque de compra */
.product-static-fallback .product-layout {
  grid-template-columns: minmax(0,4fr) minmax(220px,1fr);
  gap: 5px;
}
.product-static-fallback .product-info-panel {
  padding: 18px;
}
.product-static-fallback .product-info-panel > p { display: none; }

@media (max-width: 960px) {
  .story-product-grid { grid-template-columns: 1fr; }
  .story-product-stage { min-height: 680px; border-radius: 20px; }
  .story-product-image { padding: 24px 36% 24px 8px; }
  .story-product-overlay { width: min(42%, 380px); right: 24px; }
  .story-buy-rail {
    position: static;
    display: grid;
    grid-template-columns: minmax(130px,.7fr) minmax(220px,1.3fr) auto;
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    min-height: 0;
  }
  .buy-mini-title { margin: 4px 0 0; }
  .buy-mini-price { margin: 0; }
  .buy-mini-controls { grid-template-columns: minmax(110px,1fr) 62px minmax(150px,1fr); }
  .buy-mini-controls .btn { grid-column: auto; margin-top: 0; }
  .buy-mini-details { display: none; }
}

@media (max-width: 700px) {
  .story-product-shell { padding-inline: 6px; }
  .story-product-stage {
    min-height: 660px;
    border-radius: 18px;
  }
  .story-product-stage::before {
    background: linear-gradient(180deg, transparent 34%, rgba(8,6,4,.94) 76%), var(--story-pattern) top center / auto 48px repeat-x;
  }
  .story-product-image {
    inset: 0 0 220px;
    padding: 12px;
  }
  .story-product-overlay {
    top: auto;
    right: 18px;
    bottom: 24px;
    left: 18px;
    width: auto;
    transform: none;
  }
  .story-product-overlay h1 { font-size: clamp(45px, 14vw, 66px); }
  .story-product-phrase { font-size: clamp(27px, 8vw, 38px); }
  .story-product-summary { font-size: 13px; line-height: 1.58; }
  .story-keywords { margin-top: 12px; }
  .story-buy-rail {
    display: block;
    padding: 16px;
  }
  .buy-mini-title { font-size: 28px; }
  .buy-mini-price { margin: 10px 0; }
  .buy-mini-controls { grid-template-columns: minmax(0,1fr) 62px; }
  .buy-mini-controls .btn { grid-column: 1 / -1; }
  .buy-mini-details { display: block; }
  .story-index { top: 62px; justify-content: flex-start; }
  .product-page .wearing-story { min-height: 620px; }
  .product-page .history-context { grid-template-columns: 1fr; }
  .product-page .history-context article { min-height: auto; }
  .product-page .symbol-grid { grid-template-columns: 1fr; }
  .product-page .symbol-grid article,
  .product-page .symbol-grid article:nth-child(1),
  .product-page .symbol-grid article:nth-child(5) { grid-column: auto; }
  .product-static-fallback .product-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-home .launch-hero-media.is-video-loading::after { animation: none; }
  .product-page .symbol-grid article { transition: none; }
}