/*
 Theme Name:   L'Illa de Cuba (Bricks Child)
 Theme URI:    https://www.lilladecuba.com/
 Description:  Tema hijo de Bricks para L'Illa de Cuba. Fuentes locales, comportamiento (loader, apariciones, slider del hero, tiras, visita 360). Los estilos visuales viven en el sistema de diseño de Bricks (variables, theme style y clases globales).
 Author:       Turipano360
 Author URI:   https://www.turipano360.com/
 Template:     bricks
 Version:      1.0.0
 Text Domain:  bricks
*/

/* ---------- Fuentes locales (subconjunto latino, woff2) ---------- */
@font-face {
	font-family: "Jost";
	src: url("fonts/jost-var.woff2") format("woff2");
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Young Serif";
	src: url("fonts/young-serif.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Yellowtail";
	src: url("fonts/yellowtail.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Loader (solo portada, una vez por sesión) ---------- */
.lc-loader {
	position: fixed; inset: 0; z-index: 9999;
	display: grid; place-items: center;
	background: var(--c-marino);
	clip-path: inset(0 0 0 0);
	transition: clip-path 1s cubic-bezier(.77, 0, .18, 1);
	animation: lc-fuera 0s 4.5s forwards;
}
.lc-loader.fuera { clip-path: inset(0 0 100% 0); }
.sin-loader .lc-loader { display: none; }
.lc-loader__in { display: grid; justify-items: center; gap: 1.1rem; opacity: 0; animation: lc-entra .8s .1s ease forwards; }
.lc-loader__in img { height: 46px; width: auto; }
.lc-loader__linea { width: 160px; height: 1px; background: rgba(200, 150, 62, .25); position: relative; overflow: hidden; }
.lc-loader__linea i { position: absolute; inset: 0; background: var(--c-ocre); transform: scaleX(0); transform-origin: left; animation: lc-barra 1.2s .3s cubic-bezier(.65, 0, .35, 1) forwards; }
.lc-loader__in p { margin: 0; font-family: "Yellowtail", cursive; font-size: 1.5rem; color: var(--c-ocre); }
@keyframes lc-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lc-barra { to { transform: scaleX(1); } }
@keyframes lc-fuera { to { visibility: hidden; } }

/* ---------- Apariciones al hacer scroll ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.visto { opacity: 1; transform: none; }

/* ---------- Hero: slider con crossfade y zoom lento ---------- */
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slides > * { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; filter: saturate(.92); opacity: 0; transform: scale(1.02); transition: opacity 1.6s ease, transform 9s ease-out; }
.hero__slides > *:first-child, .hero__slides > .on { opacity: 1; }
.hero__slides.activo > *:not(.on) { opacity: 0; }
.hero__slides:not(.activo) > *:not(:first-child) { display: none; }
.hero__slides > .on { transform: scale(1.1); }
.hero__barras { display: flex; gap: 6px; }
.hero__barras button { width: 34px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero__barras button::before, .hero__barras button::after { content: ""; position: absolute; left: 0; top: 50%; height: 2px; }
.hero__barras button::before { right: 0; background: rgba(255, 255, 255, .3); }
.hero__barras button::after { width: 0; background: var(--c-blanco); }
.hero__barras button.on::after { width: 100%; transition: width var(--dur, 6s) linear; }
.hero__barras button.visto::after { width: 100%; }

/* ---------- Bandas que se desplazan (vitola y amigos) ---------- */
.marquee { display: flex; width: max-content; animation: lc-marquee var(--marquee-dur, 70s) linear infinite; }
.marquee--inv { animation-direction: reverse; }
@keyframes lc-marquee { to { transform: translateX(-50%); } }
@keyframes lc-gira { to { transform: rotate(360deg); } }
.gira { animation: lc-gira 60s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }

/* ---------- Carrusel de platos (scroll-snap nativo) ---------- */
.carrusel { scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }

/* ---------- Visita virtual 360 (Pannellum) ---------- */
#pano.pano { width: 100%; height: clamp(380px, 50vw, 640px); background: var(--c-marino-oscuro); }
.pano .pnlm-load-box { background: rgba(20, 33, 61, .85); }
.pnlm-hotspot-base.hs-paso { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(20, 33, 61, .55); border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(200, 150, 62, .35); cursor: pointer; transition: transform .25s, background .25s; }
.pnlm-hotspot-base.hs-paso::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translate(-50%, -30%) rotate(-45deg); }
.pnlm-hotspot-base.hs-paso:hover { transform: scale(1.12); background: var(--c-ocre); }
.pnlm-hotspot-base.hs-paso span { font-family: "Jost", sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; background: var(--c-marino); color: #fff; border-radius: 0; padding: .5rem .8rem; }
.visor.tocado .pista360 { opacity: 0; }
.pano .pnlm-panorama-info { display: none !important; }
.escenas button.on { background: var(--c-ocre); border-color: var(--c-ocre); color: var(--c-marino); }

@media (prefers-reduced-motion: reduce) {
	.lc-loader { display: none; }
	.js .rv { opacity: 1; transform: none; }
	.marquee, .gira { animation: none; }
	.hero__slides > *, .hero__slides > .on { transform: none; }
}