/* ══ ebooks.css · O-Vié Desktop ════════════════════════════════
   Módulo oficial Ebooks — Biblioteca O-Vié
   Diseño aprobado: oficial.html (escalera diagonal viva)
   Prefijo: eb-
   Fondo: WebGL Ocean (#j-ocean) — el módulo es transparente
   Mobile global → mobile.css (la media query 980px de aquí es
   parte estricta del diseño aprobado del módulo)
═══════════════════════════════════════════════════════════════ */

/* ── Variables del módulo (namespaced para no chocar con style.css) ── */
.ebooks-body {
  --eb-cream:            #e9dfc7;
  --eb-gold:             #c4aa62;
  --eb-banner-h:         214px;
  --eb-banner-w:         min(65vw, 980px);
  /* Continuidad con el menú del header de ovielife.com */
  --eb-header-cream-dim: #cfc0a4;
  --eb-header-cream:     #f0e6d2;
}

/* ── El body scrollea normalmente — footer queda al final ── */
.ebooks-body {
  overflow-x: hidden;
  background: #04090c; /* respaldo bajo el canvas Ocean */
}

/* ── Fondo WebGL Ocean — exacto de cuerpo-descripcion ── */
.ebooks-body #j-ocean {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   MÓDULO — caja relativa que ocupa el viewport visible
   debajo del header fijo. El footer queda después.
══════════════════════════════════════════════════════ */
.eb-module {
  position: relative;
  height: 100vh;
  margin-top: 0;
  padding-top: calc(38px + 70px);
  box-sizing: border-box;
  z-index: 5;
  overflow: hidden;
  background: transparent;
  color: var(--eb-cream);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: none;
}

/* ── COPY IZQUIERDO ─────────────────────────────────── */
.eb-left-copy {
  position: absolute;
  left: 3.15vw;
  /* 35.5vh del viewport = ~25% desde el top del módulo (que empieza a 108px) */
  top: 25%;
  width: 285px;
  z-index: 18;
  pointer-events: none;
}

.eb-left-copy .eb-kicker {
  display: block;
  margin-bottom: .9rem;
  font-family: Arial, sans-serif;
  font-size: .60rem;
  letter-spacing: .22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--eb-header-cream-dim);
}

.eb-left-copy h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2rem, 2.62vw, 3.08rem);
  line-height: .96;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--eb-header-cream-dim);
  text-shadow: 0 0 28px rgba(207, 192, 164, .13);
}

.eb-left-subcopy {
  max-width: 245px;
  margin: 1.2rem 0 0;
  font-family: Arial, sans-serif;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .05em;
  color: rgba(207, 192, 164, .72);
}

/* ── PROGRESS DOTS ──────────────────────────────────── */
.eb-prog-dots {
  position: absolute;
  left: 3.15vw;
  bottom: 7vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.eb-pdot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(196, 170, 98, .18);
  transition: background .3s, transform .28s;
}

.eb-pdot.on {
  background: rgba(196, 170, 98, .84);
  transform: scale(1.5);
}

/* ── SCROLL HINT ────────────────────────────────────── */
.eb-s-hint {
  position: absolute;
  right: 3vw;
  bottom: 7vh;
  z-index: 20;
  font-family: Arial, sans-serif;
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--eb-header-cream-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity .5s;
}

.eb-s-hint.gone { opacity: 0; }

.eb-s-shaft {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(196, 170, 98, .52), transparent);
  animation: ebShaftPulse 2s ease-in-out infinite;
}

@keyframes ebShaftPulse {
  0%, 100% { opacity: .28; transform: scaleY(1); }
  50%      { opacity: .85; transform: scaleY(1.1); }
}

/* ── BANNER VIEWPORT ────────────────────────────────── */
.eb-banner-vp {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   BANNER — visual aprobado oficial.html
   Borde dorado chrome animado + gradiente interno fuerte.
   El shimmer queda SOLO en el borde (nunca interno).
══════════════════════════════════════════════════════ */
.eb-banner {
  --x: 0px;
  --y: 0px;
  --opacity: 1;
  --scale: 1;

  position: absolute;
  left: 0;
  top: 0;
  width: var(--eb-banner-w);
  height: var(--eb-banner-h);

  /* Borde dorado animado (chrome gold) */
  border: 3px solid transparent;
  background:
    var(--banner-bg) padding-box,
    linear-gradient(
      115deg,
      #5d4518 0%, #b38a2c 14%, #fff0a8 25%, #caa13d 38%,
      #6e4d14 50%, #f8d978 62%, #9c7423 76%, #fff4b8 88%, #6b4a14 100%
    ) border-box;
  background-size: auto, auto, auto, 260% 260%;
  animation: ovieGoldChrome 4.2s linear infinite;

  transform: translate3d(var(--x), var(--y), 0) scale(var(--scale));
  opacity: var(--opacity);
  will-change: transform, opacity;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .055),
    inset 0 0 18px rgba(255, 224, 124, .075),
    0 0 10px rgba(255, 217, 102, .18),
    0 0 28px rgba(196, 170, 98, .14),
    0 18px 70px rgba(0, 0, 0, .38);
  cursor: pointer;
}

/* Gold light sweep — solo en el borde */
.eb-banner::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 3;
  pointer-events: none;
  padding: 3px;
  background:
    linear-gradient(105deg,
      transparent 0%, transparent 28%,
      rgba(255, 246, 183, .12) 35%, rgba(255, 246, 183, .95) 43%,
      rgba(196, 170, 98, .78) 49%, transparent 58%, transparent 100%);
  background-size: 240% 240%;
  animation: ovieGoldLightSweep 2.8s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .95;
}

/* Glow atmosférico derecho */
.eb-banner::after {
  content: "";
  position: absolute;
  right: -4%;
  top: -35%;
  width: 48%;
  height: 180%;
  pointer-events: none;
  background:
    radial-gradient(circle at 38% 54%, var(--glow-a, rgba(200, 130, 50, .36)), transparent 14%),
    radial-gradient(circle at 62% 46%, var(--glow-b, rgba(180, 100, 40, .32)), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08), transparent 36%),
    linear-gradient(130deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: rotate(-10deg);
  opacity: .82;
}

/* ── Contenido interno del banner ───────────────────── */
.eb-banner-content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.5rem;
  max-width: 60%;
}

.eb-tag {
  display: inline-block;
  width: max-content;
  margin-bottom: .55rem;
  padding: .15rem .45rem;
  font-family: Arial, sans-serif;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17, 18, 14, .88);
  background: rgba(196, 170, 98, .62);
}

.eb-banner h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(.92rem, 1.02vw, 1.12rem);
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(207, 192, 164, .94);
}

/* Subtítulo / recipes count */
.eb-sub {
  display: block;
  margin-top: .35rem;
  font-family: Arial, sans-serif;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(196, 170, 98, .85);
}

.eb-banner p {
  max-width: 300px;
  margin: .5rem 0 0;
  font-family: Arial, sans-serif;
  font-size: .70rem;
  line-height: 1.35;
  color: rgba(207, 192, 164, .66);
}

/* ── Fila precio + botón carrito ────────────────────── */
.eb-buy-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .7rem;
}

.eb-price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: .98rem;
  letter-spacing: .08em;
  color: var(--eb-gold);
  text-shadow: 0 0 14px rgba(196, 170, 98, .25);
}

.eb-cart-btn {
  appearance: none;
  border: 1px solid rgba(196, 170, 98, .55);
  background: rgba(196, 170, 98, .10);
  color: var(--eb-cream);
  font-family: Arial, sans-serif;
  font-size: .56rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  padding: .5rem .95rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.eb-cart-btn:hover {
  border-color: var(--eb-gold);
  background: rgba(196, 170, 98, .22);
  color: #fff8e6;
}

/* ── Imagen real del ebook — estilo DG ───────────────
   Contenida dentro del banner, alineada a la derecha,
   centrada vertical, con aire en los 4 lados y fundida
   al gradiente con mask. Nunca toca el borde dorado. ── */
.eb-img-wrap {
  position: absolute;
  z-index: 2;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 2.4rem);
  width: 36%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.eb-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .48));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  user-select: none;
}

/* ── Animaciones doradas ────────────────────────────── */
@keyframes ovieGoldChrome {
  0%   { background-position: 0 0, 0 0, 0 0, 0% 50%; }
  100% { background-position: 0 0, 0 0, 0 0, 260% 50%; }
}

@keyframes ovieGoldLightSweep {
  0%   { background-position: 165% 50%; opacity: .18; }
  18%  { opacity: .95; }
  46%  { background-position: -55% 50%; opacity: .88; }
  100% { background-position: -55% 50%; opacity: .18; }
}

/* ══════════════════════════════════════════════════════
   EBOOKS — mobile (max-width: 980px)
   Escalera diagonal adaptada al viewport angosto.
══════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* ── Módulo: espacio visible bajo header mobile ── */
  .eb-module {
    height: calc(100vh - 38px - 58px);
    margin-top: calc(38px + 58px);
    padding-top: 0;
  }

  /* ── Banner: position absolute CRÍTICO para el motor JS ── */
  .eb-banner {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(var(--x), var(--y), 0) scale(var(--scale));
    opacity: var(--opacity);
  }

  /* ── Banners más angostos y bajos ── */
  .ebooks-body {
    --eb-banner-w: 88vw;
    --eb-banner-h: 178px;
  }

  /* ── Copy izquierdo: oculto completo en mobile —
        interfiere con los banners. En desktop sigue
        visible y traducible (ES/EN). ── */
  .eb-left-copy {
    display: none;
  }

  /* ── Dots ── */
  .eb-prog-dots {
    left: 5vw;
    bottom: 5vh;
  }

  /* ── Hint ── */
  .eb-s-hint {
    right: 5vw;
    bottom: 5vh;
    font-size: .48rem;
  }

  /* ── Banner: texto compacto ── */
  .eb-banner-content {
    max-width: 64%;
    padding: .8rem 1rem;
  }

  .eb-banner h2 {
    font-size: clamp(.78rem, 3vw, .94rem);
    letter-spacing: .16em;
    line-height: 1.3;
  }

  .eb-sub {
    font-size: .50rem;
    margin-top: .3rem;
  }

  .eb-banner p {
    font-size: .62rem;
    margin-top: .4rem;
    max-width: 100%;
  }

  .eb-tag {
    font-size: .48rem;
    margin-bottom: .45rem;
  }

  .eb-buy-row {
    gap: .7rem;
    margin-top: .55rem;
  }

  .eb-price { font-size: .86rem; }

  .eb-cart-btn {
    font-size: .50rem;
    padding: .4rem .7rem;
  }

  /* ── Imagen real contenida y elegante en mobile ── */
  .eb-img-wrap {
    right: .8rem;
    width: 33%;
    height: calc(100% - 1.8rem);
  }
}

/* ── Pantallas muy pequeñas (≤ 390px) ─────────────── */
@media (max-width: 390px) {
  .ebooks-body {
    --eb-banner-w: 92vw;
    --eb-banner-h: 168px;
  }
}