/* Portada Wayuunaiki: secuencia sincronizada con el desplazamiento */
.portada-rueda {
  position: relative;
  height: 265svh;
  padding: 0;
  background: #eaf5eb;
  color: #163f2c;
  isolation: isolate;
}
.portada-rueda-sticky {
  position: sticky;
  top: 84px;
  display: flex;
  align-items: center;
  height: calc(100svh - 84px);
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(circle at 76% 33%, #f8fff8 0%, #e9f5ed 50%, #dae9d8 100%);
}
.portada-rueda-sticky::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 13px;
  background: linear-gradient(180deg, #2c782d, #e28b38 75%, #d85a30);
  z-index: 3;
}
.portada-orbita {
  position: absolute;
  right: -13vw;
  top: -38vw;
  width: 83vw;
  aspect-ratio: 1;
  border: 1px solid rgba(48,112,58,.11);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(80,147,71,.035), 0 0 0 180px rgba(80,147,71,.025);
  pointer-events: none;
}
.portada-rueda-interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  max-width: 1420px;
  width: min(1420px, calc(100% - 9vw));
  margin: auto;
  padding: 20px 0 36px;
}
.portada-rueda-contenido { position: relative; z-index: 2; min-width: 0; }
.portada-eyebrow {
  margin: 0 0 22px;
  color: #3b6d11;
  font: 800 clamp(10px, .86vw, 13px)/1.5 var(--fuente-cuerpo);
  letter-spacing: .13em;
}
.portada-eyebrow span { color: #d85a30; margin-inline: 6px; }
.portada-rueda h1 {
  max-width: 11.5ch;
  margin: 0;
  font: 800 clamp(39px, 4vw, 67px)/1.06 var(--fuente-display);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.portada-rueda h1 em { color: #cf5b2e; font-style: normal; }
.portada-intro {
  max-width: 42ch;
  margin: 18px 0 16px;
  color: #385948;
  font: 500 clamp(15px, 1.1vw, 18px)/1.55 var(--fuente-cuerpo);
}
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.portada-acciones a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 43px;
  text-decoration: none;
  font: 800 14px var(--fuente-cuerpo);
}
.portada-escuchar { padding: 0 21px; border-radius: 99px; color: #fff; background: #276540; box-shadow: 0 12px 30px rgba(34,85,48,.18); }
.portada-escuchar:hover { background: #154b30; }
.portada-podcasts { color: #28633c; border-bottom: 1px solid #84aa88; }
.portada-acciones a:focus-visible,.portada-tiendas a:focus-visible,.portada-qr:focus-visible { outline: 3px solid #d85a30; outline-offset: 4px; }
.portada-descarga {
  position: relative;
  width: min(510px, 100%);
  margin-top: clamp(15px, 2vh, 24px);
  padding: 17px 18px;
  border: 1px solid rgba(37,92,50,.14);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 18px 60px rgba(20,65,38,.09);
  backdrop-filter: blur(16px);
  scroll-margin-top: 100px;
}
.portada-descarga-fila { display: flex; align-items: center; gap: 16px; }
.portada-qr {
  display: block;
  flex: 0 0 142px;
  width: 142px;
  height: 142px;
  padding: 5px;
  border: 1px solid #dfebdc;
  border-radius: 12px;
  background: white;
}
.portada-qr img { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; }
.portada-descarga-info { min-width: 0; }
.portada-descarga-etiqueta { display: block; color: #d25c2e; font: 800 11px var(--fuente-cuerpo); letter-spacing: .12em; }
.portada-descarga-info strong { display: block; margin-top: 3px; font: 800 clamp(16px, 1.35vw, 21px)/1.2 var(--fuente-display); }
.portada-descarga-info p { margin: 5px 0 11px; color: #526759; font: 500 13px/1.4 var(--fuente-cuerpo); }
.portada-tiendas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.portada-tiendas a { display: inline-flex; border: 1px solid #e6ede5; border-radius: 7px; overflow: hidden; background: #fff; transition: transform .18s ease; }
.portada-tiendas a:hover { transform: translateY(-2px); }
.portada-tiendas img { width: auto; height: 42px; max-width: 126px; object-fit: contain; }
.portada-rueda-visual {
  --mouse-rotate: 0deg;
  --mouse-shift: 0px;
  position: relative;
  align-self: stretch;
  min-height: min(77svh, 760px);
  overflow: hidden;
  border-radius: 42px 42px 120px 42px;
  background: #d9f0e7 url('../img/rueda-frames/rueda-001.webp') center 38% / cover no-repeat;
  box-shadow: 0 36px 90px -48px rgba(18,73,45,.36);
  transform: perspective(1000px) rotateY(var(--mouse-rotate)) translateY(var(--mouse-shift));
  will-change: transform;
}
.portada-rueda-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14%;
  background: linear-gradient(transparent, rgba(13,71,47,.13));
  pointer-events: none;
}
.portada-rueda-halo {
  position: absolute;
  inset: -18% -20% auto;
  height: 48%;
  background: radial-gradient(circle, rgba(238,143,46,.15), transparent 64%);
  pointer-events: none;
  z-index: 1;
}
.portada-rueda-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: min(77svh, 760px);
  object-fit: cover;
  object-position: center 38%;
}
.portada-rueda-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  pointer-events: none;
}
.portada-rueda-canvas.lista { opacity: 1; }
.portada-rueda-sello {
  position: absolute;
  z-index: 2;
  right: 19px;
  bottom: 18px;
  padding: 9px 13px;
  border-radius: 99px;
  color: white;
  background: rgba(19,79,45,.88);
  font: 800 10px var(--fuente-cuerpo);
  letter-spacing: .08em;
}
.portada-indicador {
  position: absolute;
  left: max(4.5vw, calc((100vw - 1420px) / 2));
  bottom: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #3d6946;
  font: 800 10px var(--fuente-cuerpo);
  letter-spacing: .12em;
}
.portada-indicador > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #d85a30; }
.portada-indicador-linea { display: block; width: 55px; height: 2px; overflow: hidden; background: rgba(32,85,44,.2); }
.portada-indicador-linea i { display: block; width: 100%; height: 100%; background: #d85a30; transform: scaleX(var(--wheel-progress, 0)); transform-origin: left; }

@media (max-width: 1050px) {
  .portada-rueda-interior { width: calc(100% - 48px); gap: 16px; }
  .portada-rueda h1 { font-size: clamp(35px, 4.5vw, 52px); }
  .portada-descarga { padding: 13px; }
  .portada-qr { flex-basis: 116px; width: 116px; height: 116px; }
  .portada-tiendas img { height: 38px; }
}
@media (max-width: 720px) {
  .portada-rueda { height: 230svh; }
  .portada-rueda-sticky { min-height: 570px; }
  .portada-rueda-sticky::before { width: 7px; }
  .portada-rueda-interior { display: block; width: calc(100% - 30px); height: 100%; padding: 14px 0 25px; }
  .portada-rueda-contenido { height: 100%; }
  .portada-eyebrow { max-width: 57%; margin: 4px 0 10px; font-size: 9px; line-height: 1.4; }
  .portada-rueda h1 { max-width: 58%; font-size: clamp(29px, 7vw, 43px); line-height: 1.07; letter-spacing: -.05em; }
  .portada-intro { max-width: 52%; margin: 12px 0 10px; font-size: 12px; line-height: 1.45; }
  .portada-acciones { max-width: 52%; gap: 1px 10px; }
  .portada-acciones a { min-height: 32px; font-size: 11px; }
  .portada-escuchar { padding: 0 10px; }
  .portada-rueda-visual {
    position: absolute;
    top: 22px;
    right: -19px;
    z-index: 0;
    width: 61%;
    height: min(56svh, 460px);
    min-height: 0;
    border-radius: 36px 0 0 80px;
    box-shadow: none;
  }
  .portada-rueda-frame { height: 100%; min-height: 0; object-position: 51% center; }
  .portada-rueda-visual::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(90deg, #eaf5ed 0%, rgba(234,245,237,.98) 18%, rgba(234,245,237,.88) 31%, transparent 51%);
    pointer-events: none;
  }
  .portada-rueda-sello { display: none; }
  .portada-descarga {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    width: 100%;
    margin: 0;
    padding: 10px 13px 13px;
    border-radius: 20px;
  }
  .portada-descarga-fila { gap: 12px; }
  .portada-qr { flex-basis: 112px; width: 112px; height: 112px; }
  .portada-descarga-info strong { font-size: 17px; }
  .portada-descarga-info p { font-size: 11px; margin: 4px 0 6px; }
  .portada-tiendas { gap: 5px; }
  .portada-tiendas img { height: auto; width: min(110px, 100%); max-width: none; }
  .portada-rueda-canvas { object-position: 51% center; }
  .portada-indicador { left: 17px; bottom: 6px; font-size: 8px; }
}
@media (max-width: 640px) {
  .portada-rueda-sticky { top: 72px; height: calc(100svh - 72px); }
}
@media (max-width: 380px), (max-height: 690px) and (max-width: 720px) {
  .portada-rueda-sticky { min-height: 510px; }
  .portada-eyebrow { font-size: 8px; margin-bottom: 5px; }
  .portada-rueda h1 { font-size: clamp(27px, 6.7vw, 36px); }
  .portada-intro { display: none; }
  .portada-rueda-visual { height: min(53svh, 380px); }
  .portada-descarga { bottom: 20px; padding: 9px 11px; }
  .portada-descarga-fila { gap: 9px; }
  .portada-qr { flex-basis: 98px; width: 98px; height: 98px; }
  .portada-descarga-etiqueta { font-size: 9px; }
  .portada-descarga-info strong { font-size: 15px; }
  .portada-descarga-info p { font-size: 10px; }
  .portada-tiendas { gap: 4px; }
  .portada-tiendas img { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .portada-rueda { height: auto; }
  .portada-rueda-sticky { position: relative; top: auto; min-height: 620px; }
  .portada-rueda-visual { transform: none !important; will-change: auto; }
  .portada-tiendas a { transition: none; }
}