/* Bote 3D. Un solo lienzo fijo a pantalla completa dibuja la portada, las tarjetas y la ficha (ver assets/js/n3d).
   Las fotos son la primera vista; el 3D las reemplaza cuando carga. Sin WebGL o con poco movimiento, todo sigue igual. */
.lienzo-3d { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; }

/* Portada */
.hero-botes { position: relative; touch-action: pan-y; }
.hero-botes.listo a img { visibility: hidden; }
/* Con el 3D activo los enlaces de la foto estorban: el toque debe abrir el bote, no llevar a la ficha. */
.hero-botes.listo a { pointer-events: none; }
.hero-3d-ui { position: absolute; left: 0; right: 0; bottom: .25rem; display: none; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; text-align: center; z-index: 11; }
.hero-botes.listo .hero-3d-ui { display: flex; }
.hero-botes.abierto .hero-3d-ui { display: none; }
.hero-3d-pista { font-family: var(--mono); margin: 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.hero-3d-saltar { pointer-events: auto; background: none; border: 0; padding: .3rem .5rem; color: var(--suave); font: inherit; font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.hero-3d-saltar:hover { color: var(--texto); }

/* Tamaño de la escena: en celular va primero y ocupa casi toda la primera pantalla; en escritorio, alta como el texto. */
@media (max-width: 899px) {
  .hero .caja { padding-top: .25rem; gap: .5rem; }
  .hero-botes { order: -1; max-width: none; margin: 0; height: 74vh; height: min(74svh, 660px); padding-top: 0; }
  .hero-3d-ui { bottom: .1rem; }
}
@media (min-width: 900px) {
  /* La escena se estira hasta la orilla derecha de la pantalla: el texto queda a la izquierda, dentro del ancho normal. */
  .hero .caja { max-width: none; margin: 0; padding-top: 1.5rem; padding-left: max(1.25rem, calc((100% - var(--ancho)) / 2 + 1.25rem)); padding-right: 3vw; grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); }
  .hero-botes { align-self: stretch; min-height: clamp(500px, 64vh, 700px); }
  .hero h1 { font-size: clamp(2.2rem, 3.9vw, 3.9rem); }
}

/* Tarjetas de producto */
.tarjeta .foto.con-3d img { visibility: hidden; }

/* Ficha de producto: el bote ocupa todo el cuadro y se puede tocar. */
.galeria .principal[data-bote-producto] { position: relative; height: min(640px, 125vw); padding: 0; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; touch-action: pan-y; }
.galeria .principal[data-bote-producto] img { height: 88%; }
.galeria .principal.con-3d img { visibility: hidden; }
.bote-pista { font-family: var(--mono); display: none; position: absolute; left: 0; right: 0; bottom: .9rem; margin: 0; text-align: center; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); pointer-events: none; z-index: 11; transition: opacity .4s; }
.galeria .principal.con-3d .bote-pista { display: block; }
.bote-pista.oculta { opacity: 0; }