/* Fuente local: Atomic (para títulos) */
@font-face{
	font-family: "Atomic";
	src: url("../font/Atomic.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root{
	--gap: 16px;
	--modal-w-desktop: 900px;
	--modal-enter-dy: 18px;
	--modal-enter-ms: 240ms;
	
	/* Padding por lado del carrusel ABC */
	--options-pad-top: 0px;
	--options-pad-right: 28px;
	--options-pad-bottom: 0px;
	--options-pad-left: 28px;
}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui,Segoe UI,Arial}
canvas { touch-action: none; } /* evita gestos nativos en móvil */

/* Instruction modal */
#overlayInstructions {
position:fixed; inset:0; background:rgba(0,0,0,.6);
display:none; align-items:center; justify-content:center; z-index:10;
}
#modalInstructions {
color:#eee; border-radius:14px; padding:64px 30px;
width:min(92vw, var(--modal-w-desktop));
max-height:78vh;
overflow:auto; text-align:center;
border:0px solid #222; box-shadow:0 10px 30px rgba(0,0,0,.5);

/* FONDO ABC (DESKTOP) */
background:
linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)),
url("../images/popup-bg-abc.png") top/cover no-repeat,
transparent;

/* Animación de caída */
opacity:0; transform:translateY(calc(-1 * var(--modal-enter-dy)));
animation: modalDrop var(--modal-enter-ms) ease-out forwards;
animation-duration: 1s;
}

/* TIPOGRAFÍAS Y TAMAÑOS (ABC) */
#modalInstructions h2 {
font-family: "Atomic", system-ui, sans-serif;
font-weight: 700;
margin: 2px 0 6px;
color: black;
font-size: clamp(26px, 3.6vw, 34px);
letter-spacing: 0.5px;
line-height: 1.05;

}

#modalInstructions p {
font-family: "Special Elite", serif;
margin: 6px 0 12px;
color: black;
font-size: clamp(16px, 1.8vw, 22px);
line-height: 1.35;
opacity: 0.95;
}

/* Overlay + modal estándar (A/B/C) */
#overlay {
position:fixed; inset:0; background:rgba(0,0,0,.6);
display:none; align-items:center; justify-content:center; z-index:10;
}
#modal {
color:#eee; border-radius:14px; padding:64px 30px;
width:min(92vw, var(--modal-w-desktop));
max-height:78vh;
overflow:auto; text-align:center;
border:0px solid #222; box-shadow:0 10px 30px rgba(0,0,0,.5);

/* FONDO ABC (DESKTOP) */
background:
linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)),
url("../images/popup-bg-abc.png") top/cover no-repeat,
transparent;

/* Animación de caída */
opacity:0; transform:translateY(calc(-1 * var(--modal-enter-dy)));
animation: modalDrop var(--modal-enter-ms) ease-out forwards;
}
@keyframes modalDrop{ to { opacity:1; transform:translateY(0); } }

/* TIPOGRAFÍAS Y TAMAÑOS (ABC) */
#modal h2 {
font-family: "Atomic", system-ui, sans-serif;
font-weight: 700;
margin: 2px 0 6px;
color: black;
font-size: clamp(26px, 3.6vw, 34px);
letter-spacing: 0.5px;
line-height: 1.05;

}
#modal p {
font-family: "Special Elite", serif;
margin: 6px 0 12px;
color: black;
font-size: clamp(16px, 1.8vw, 22px);
line-height: 1.35;
opacity: 0.95;
}

.options-wrap { position:relative; }

/* Carrusel (desktop): 3 visibles exactos; 4º al desplazar */
.options{
	display:flex; flex-wrap:nowrap;
	gap:var(--gap); margin-top:10px;
	overflow:hidden; scroll-behavior:smooth;
	padding: var(--options-pad-top) var(--options-pad-right)
	var(--options-pad-bottom) var(--options-pad-left);
}
.option-img{
	flex: 0 0 auto; /* el ancho exacto lo fija JS */
	/* aspect-ratio: 3 / 4;*/ object-fit:cover;
	border-radius:10px; cursor:pointer;
	transition: transform .2s ease, filter .2s ease, border-color .2s ease;
	display:block; user-select:none; background:transparent;
}
.option-img:hover { transform:scale(1.03); filter:brightness(1.08); border-color:#2b7cff; }

.row { display:flex; gap:10px; justify-content:center; align-items:center; margin-top:12px; }
.btn-ghost { border:1px solid #3a3a3a; background:transparent; color:#333; padding:8px 12px; border-radius:8px; cursor:pointer; }

.slider-btn{
	position:absolute; top:50%; transform:translateY(-50%);
	width:36px; height:48px; border-radius:8px; border:1px solid #2a2a2a; background:#111a;
	color:#eee; cursor:pointer; display:grid; place-items:center;
	backdrop-filter: blur(4px);
	transition: filter .2s, background .2s, transform .1s;
	z-index:2;
}
.slider-btn:hover { filter:brightness(1.2); background:#1b1b1bcc; }
.slider-btn:active { transform:translateY(-50%) scale(0.96); }
.slider-prev { left:-8px; } .slider-next { right:-8px; }

/* Overlay + modal ESPECIAL */
#overlaySpecial {
position:fixed; inset:0; background:rgba(0,0,0,.6);
display:none; align-items:center; justify-content:center; z-index:11;
}
#modalSpecial{
color:#eee; border-radius:14px; padding:18px 20px;
width:min(96vw, 980px);
max-height:82vh; overflow:auto; text-align:center;
border:1px solid #222; box-shadow:0 10px 30px rgba(0,0,0,.5);

/* FONDO SPECIAL (DESKTOP) */
background:
linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
#111;

opacity:0; transform:translateY(calc(-1 * var(--modal-enter-dy)));
animation: modalDrop var(--modal-enter-ms) ease-out forwards;
}

/* TIPOGRAFÍAS Y TAMAÑOS (SPECIAL) */
#modalSpecial h2 {
font-family: "Atomic", system-ui, sans-serif;
font-weight: 700;
margin: 2px 0 10px;
font-size: clamp(28px, 3.6vw, 44px);
letter-spacing: 0.5px;
line-height: 1.05;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
#modalSpecial p {
font-family: "Special Elite", serif;
margin: 6px 0 14px;
color: #d7d7d7;
font-size: clamp(16px, 1.8vw, 22px);
line-height: 1.35;
opacity: 0.95;
}

.sp-grid{ display:grid; grid-template-columns: 1fr 260px; gap:14px; align-items:start; }
.sp-main{
	width:400px; height:400px; object-fit:cover;
	border-radius:12px; border:2px solid #333; background:#0d0d0d;
	margin:0 auto;
}
.sp-thumbs{ display:flex; flex-direction:column; gap:10px; }
.sp-thumb{
	width:100%; aspect-ratio: 4.22 / 1; object-fit:cover;
	border-radius:10px; border:2px solid #333; cursor:pointer;
	transition: transform .2s ease, filter .2s ease, border-color .2s ease; background:#0d0d0d;
}
.sp-thumb:hover { transform:scale(1.02); filter:brightness(1.08); border-color:#ff2d55; }

.sp-actions { display:flex; justify-content:center; margin-top:14px; }
.btn-primary{
	background:#ff2d55; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
	opacity:.5; pointer-events:none;
}
.btn-primary.enabled { opacity:1; pointer-events:auto; }

/* Loader + logo */
#loading { position:fixed; inset:0; display:grid; place-items:center; color:#9aa; z-index:5; pointer-events:none; background:transparent; }
#logo { position:fixed; bottom:36px; right:36px; z-index:4; }
#logo img { height:110px; width:auto; }

/* Mensaje junto al hotspot especial */
#hotspotMsg{
position:fixed; display:none; z-index:20; background:#111; color:#eee;
border:1px solid #333; border-radius:10px; padding:8px 12px; box-shadow:0 8px 22px rgba(0,0,0,.5);
white-space:nowrap; transform:translate(-50%, -120%);
pointer-events:none; font-size:.95rem;
}

/* Banner de error */
#err{
position:fixed;top:12px;left:50%;transform:translateX(-50%);
background:#b00020;color:#fff;padding:8px 12px;border-radius:8px;
font:14px/1.2 system-ui;z-index:100;display:none;
box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* Responsive móvil */
@media (max-width: 640px) {
	:root{
		--options-pad-top: 0px;
		--options-pad-right: 12px;
		--options-pad-bottom: 10px;
		--options-pad-left: 12px;
	}
	
	/* POPUP ABC: fondo distinto en móvil */
	#modal{
	background:
	linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
	url("../images/popup-bg-abc-mobile.png") center/cover no-repeat,
	#111;
	}
	/* POPUP SPECIAL: fondo distinto en móvil */
	#modalSpecial{
	background:
	linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)),
	#111;
	}
	#modalInstructions {
	background:
	linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)),
	url("../images/popup-bg-abc-mobile.png") center/cover no-repeat,
	transparent;
	}
	
	/* Carrusel móvil: 1 tarjeta visible; scroll horizontal */
	.options{
		display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
		gap:var(--gap); margin-top:10px;
		scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
	}
	.option-img{
		/* El JS pone ancho exacto a 1 tarjeta, aquí mantén snap */
		scroll-snap-align:center;
	}
	
	.slider-prev { left:4px; } .slider-next { right:4px; }
	
	/* Special pop-up: thumbs en grid 2x2 */
	.sp-grid{ grid-template-columns: 1fr; }
	
	.sp-thumbs{
		display: grid;
		grid-template-columns: 1fr 1fr; /* dos columnas */
		gap: 10px;
	}
	
	.sp-thumb{
		width: 100%;                  /* que llenen la celda */
		aspect-ratio: 4.22 / 1;       /* tu proporción estrecha */
		object-fit: cover;
	}
	
	/* La imagen principal ya la dejas en 1:1 a pantalla */
	.sp-main{ width: 100%; height: auto; aspect-ratio: 1 / 1; }
}
.sp-actions{ justify-content:center; }
}