/* Ocarina of Time (inc/ocarina.php, assets/ocarina.js): cabecera de pradera al atardecer.
   Todo cuelga de body.hcp-ocarina, que pone el JS solo dentro de las fechas. */
body.hcp-ocarina header.wp-block-template-part { position: relative; background: #140f33; }
body.hcp-ocarina .hcp-oc-escena { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; z-index: 0; }
/* Un poco más alta, para que quepan la hierba y el chico por debajo del menú (como en Halloween). */
body.hcp-ocarina .hcp-site-header { background: transparent !important; padding-top: 30px !important; padding-bottom: 30px !important; }
/* Menú, flecha de «Índices», hamburguesa e iconos en blanco (el menú abierto en móvil y el desplegable siguen como siempre). */
body.hcp-ocarina .hcp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
body.hcp-ocarina .hcp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon,
body.hcp-ocarina .hcp-site-header .wp-block-navigation__responsive-container-open,
body.hcp-ocarina .hcp-site-header .wc-block-customer-account__link,
body.hcp-ocarina .hcp-site-header .wc-block-mini-cart__button { color: #fff !important; text-shadow: 0 2px 0 #000; }
body.hcp-ocarina .hcp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: #f2d24a !important; }
body.hcp-ocarina .hcp-site-header .wp-block-navigation__responsive-container-open svg { fill: #fff; }
/* Número del carrito: sin el blanco ni la sombra del botón (salía blanco sobre su círculo blanco en Halloween). */
body.hcp-ocarina .hcp-site-header .wc-block-mini-cart__badge { color: #111 !important; text-shadow: none !important; background: #fff !important; border-color: #fff !important; }
/* Nubes del día (assets/ocarina.js, construirNubes): tira el doble de ancha que se desliza media tira y vuelve a empezar.
   El marco recorta lo que sobresale sin recortar la cabecera (el menú desplegable sigue saliendo por debajo). */
body.hcp-ocarina .hcp-oc-cielo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
body.hcp-ocarina .hcp-oc-nubes { position: absolute; left: 0; top: 0; width: 200%; height: 100%; image-rendering: pixelated; animation: hcp-oc-nubes 180s linear infinite; }
@keyframes hcp-oc-nubes { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.hcp-ocarina .hcp-oc-nubes { animation: none; } }
/* Pieza dorada (insignia secreta OCARINA'26): flota y brilla; z-index 11 para estar por encima de .hcp-site-header (10). */
body.hcp-ocarina .hcp-oc-pieza { position: absolute; z-index: 11; width: 28px; height: 28px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; min-height: 0 !important; box-shadow: none !important; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; filter: drop-shadow(0 0 4px #fff2a0) drop-shadow(0 0 8px #ffc020); }
body.hcp-ocarina .hcp-oc-pieza.visible { opacity: 1; visibility: visible; animation: hcp-oc-flota 2.4s ease-in-out infinite; }
body.hcp-ocarina .hcp-oc-pieza canvas { display: block; width: 28px; height: 28px; image-rendering: pixelated; }
body.hcp-ocarina .hcp-oc-pieza:focus-visible { outline: 2px dashed #ffd23a; outline-offset: 2px; }
@keyframes hcp-oc-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { body.hcp-ocarina .hcp-oc-pieza.visible { animation: none; } }
body.hcp-ocarina .hcp-oc-globo { position: absolute; z-index: 30; width: 260px; box-sizing: border-box; padding: 10px 12px; border: 2px solid #ffd23a; border-radius: 8px; background: #14203a; color: #fff; font-size: 14px; line-height: 1.35; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.45); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .2s; }
body.hcp-ocarina .hcp-oc-globo.visible { opacity: 1; transform: none; pointer-events: auto; }
body.hcp-ocarina .hcp-oc-globo a { color: #ffd23a; font-weight: 700; }
/* Volcán (assets/ocarina.js, construirVolcan): el fuego del cráter parpadea y dos anillos de humo suben, crecen y se deshacen. */
body.hcp-ocarina .hcp-oc-volcan { position: absolute; pointer-events: none; z-index: 0; }
body.hcp-ocarina .hcp-oc-volcan canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
body.hcp-ocarina .hcp-oc-fuego { animation: hcp-oc-fuego 1.2s steps(1) infinite; filter: drop-shadow(0 0 4px #ff8a20); }
@keyframes hcp-oc-fuego { 0% { opacity: 1; } 25% { opacity: .7; } 40% { opacity: 1; } 60% { opacity: .55; } 75% { opacity: .9; } }
body.hcp-ocarina .hcp-oc-humo { transform-origin: 50% 80%; opacity: 0; animation: hcp-oc-humo 6s linear infinite; }
body.hcp-ocarina .hcp-oc-humo-1 { animation-delay: -3s; }
@keyframes hcp-oc-humo { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-40%) scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	body.hcp-ocarina .hcp-oc-fuego { animation: none; }
	body.hcp-ocarina .hcp-oc-humo { animation: none; }
	body.hcp-ocarina .hcp-oc-humo-0 { opacity: .9; }
}