/* === HERO + ENCABEZADO TRANSPARENTE (LAPTOP Y CELULAR) === */
  header { position: fixed; top: 0; left: 0; right: 0; z-index: 150;
    transition: background-color .35s var(--ease), border-color .35s var(--ease); }
  .header-center img { transition: filter .35s var(--ease); }
  .desktop-link, .icon-btn, .menu-btn, .header-bottom a, .fav-count { transition: color .35s var(--ease), background-color .35s var(--ease), border-color var(--fast) var(--ease); }

  .hero { display: block; position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 560px; background: #000; overflow: hidden; }
  .hero picture { display: block; width: 100%; height: 100%; }
  .hero img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
  .hero::after { content:''; position:absolute; inset:0 0 auto 0; height:240px; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,0) 100%); }
  .wrap { padding-top: 120px; }

  /* Efecto Omega: la portada se queda atras y las secciones de abajo suben por encima.
     header.js pone --hero-p (0 a 1) segun cuanto se ha bajado y --hero-y (px bajados).
     - PC: la portada es "sticky" (fija) y el contenido la cubre.
     - Celular: en iPhone una portada sticky a veces se dibuja encima de las secciones al deslizar,
       asi que ahi la imagen solo se desplaza mas lento dentro de su propia caja (mismo efecto, sin encimarse). */
  #destacados, #generos, #catalogo { position: relative; z-index: 1; }
  .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; opacity: calc(var(--hero-p, 0) * .6); }
  @media (min-width: 821px) {
    .hero { position: sticky; top: 0; z-index: 0; }
    #destacados { box-shadow: 0 -18px 40px -12px rgba(0,0,0,.35); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-content { opacity: calc(1 - var(--hero-p, 0) * 1.6); translate: 0 calc(var(--hero-p, 0) * -48px); }
    @media (min-width: 821px) {
      .hero img { transform: scale(calc(1 + var(--hero-p, 0) * .06)); transform-origin: 60% 50%; will-change: transform; }
    }
    @media (max-width: 820px) {
      .hero picture { transform: translate3d(0, calc(var(--hero-y, 0px) * .5), 0); }
    }
  }

  /* Texto del hero (laptop: izquierda, bloque inferior, como Omega) */
  .hero-content { position: absolute; z-index: 2; left: clamp(40px, 5.9vw, 140px); bottom: 17%; max-width: 46vw; color: #fff; }
  .hero-eyebrow { display: block; font-size: var(--fs-etiqueta); font-weight: 500; letter-spacing: .02em; line-height: 14px; text-transform: uppercase; margin-bottom: 4px; }
  .hero-title { font-family: var(--font-titulo); font-size: var(--fs-titulo); font-weight: 800; letter-spacing: .01em; line-height: 24px; text-transform: uppercase; margin-bottom: 22px; }
  .hero-btn { display: inline-block; font-family: inherit; font-size: var(--fs-etiqueta); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; background: transparent; border: 1px solid #fff; padding: 13px 22px; cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease), transform .12s var(--ease); }
  /* Laptop/PC: la imagen ocupa toda la pantalla, asi que el texto de portada crece con el ancho */
  @media (min-width: 821px) {
    .hero-eyebrow { font-size: clamp(12px, 1vw, 16px); line-height: 1.2; margin-bottom: clamp(6px, .6vw, 10px); }
    .hero-title { font-size: clamp(28px, 2.5vw, 40px); line-height: 1.1; margin-bottom: clamp(24px, 2.2vw, 34px); }
    .hero-btn { font-size: clamp(12px, .85vw, 13px); padding: 14px 26px; }
  }
  .hero-btn:hover, .hero-btn:focus-visible { background: #fff; color: var(--black); outline: none; }
  .hero-btn:active { background: #d4d4d8; border-color: #d4d4d8; color: var(--black); transform: scale(.97); }
  @media (prefers-reduced-motion: no-preference) {
    .hero-content > * { animation: heroIn .8s var(--ease) backwards; }
    .hero-content > :nth-child(2) { animation-delay: .12s; }
    .hero-content > :nth-child(3) { animation-delay: .24s; }
    @keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }

  /* Encabezado transparente (blanco) mientras se esta sobre la imagen.
     Con mouse: se vuelve solido al pasar el cursor. En pantalla tactil no hay hover. */
  @media (hover: hover) {
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) { background: transparent; border-bottom-color: transparent; }
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .desktop-link,
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .icon-btn,
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .menu-btn,
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .header-bottom a { color: #fff; }
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .header-bottom a:hover { border-bottom-color: #fff; }
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .header-center img { filter: none; }
      header.on-hero:not(:hover):not(.search-open):not(.panel-open) .fav-count { background: transparent; color: #fff; }
  }
  @media (hover: none) {
    header.on-hero:not(.search-open):not(.panel-open) { background: transparent; border-bottom-color: transparent; }
    header.on-hero:not(.search-open):not(.panel-open) .desktop-link,
    header.on-hero:not(.search-open):not(.panel-open) .icon-btn,
    header.on-hero:not(.search-open):not(.panel-open) .menu-btn,
    header.on-hero:not(.search-open):not(.panel-open) .header-bottom a { color: #fff; }
    header.on-hero:not(.search-open):not(.panel-open) .header-bottom a:hover { border-bottom-color: #fff; }
    header.on-hero:not(.search-open):not(.panel-open) .header-center img { filter: none; }
    header.on-hero:not(.search-open):not(.panel-open) .fav-count { background: transparent; color: #fff; }
  }

  /* Celular: imagen vertical, texto en el espacio de abajo */
  @media (max-width: 820px) {
    .hero { min-height: 520px; }
    /* reloj mas pequeno y mas abajo para que no choque con el logo del encabezado;
       el borde de arriba de la foto se difumina en el negro del fondo */
    .hero img { object-position: 50% 50%; transform: translateY(-4.5%) scale(.8); transform-origin: 50% 78%;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 90%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 90%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
      mask-composite: intersect; }
    .hero::after { height: 150px; }
    .wrap { padding-top: 84px; }
    .hero-content { left: 24px; right: 24px; max-width: none; bottom: calc(max(5.5svh, 36px) + env(safe-area-inset-bottom, 0px)); }
    .hero-title { margin-bottom: 20px; }
    .hero-btn { padding: 12px 22px; }
  }
  @media (max-width: 820px) and (max-height: 700px) {
    .hero-content { bottom: 24px; }
    .hero-title { margin-bottom: 14px; }
    .hero-btn { padding: 10px 18px; }
  }