/*
 * Nevera Padel — los paneles: el menu del celular y el asesor de palas.
 *
 * Se piden sin detener el dibujo de la pagina (inc/menu.php): los dos
 * estan cerrados al entrar, asi que no hacen falta antes. Los colores y
 * las tipografias son las variables de theme.json.
 */

.np-menu,
.np-asesor {
	--np-p-tinta: var(--wp--preset--color--tinta, #0d0d0d);
	--np-p-blanco: var(--wp--preset--color--blanco, #fff);
	--np-p-hueso: var(--wp--preset--color--hueso, #f4f5f1);
	--np-p-linea: var(--wp--preset--color--linea, #e2e2dd);
	--np-p-apagado: var(--wp--preset--color--apagado, #6e6e68);
	--np-p-pista: var(--wp--preset--color--pista, #0e3b37);
	--np-p-pelota: var(--wp--preset--color--pelota, #d9e34b);
	--np-p-display: var(--wp--preset--font-family--display, "Arial Narrow", Arial, sans-serif);
	--np-p-texto: var(--wp--preset--font-family--texto, Arial, sans-serif);
	padding: 0;
	border: 0;
	color: var(--np-p-tinta);
	font-family: var(--np-p-texto);
}

/* Medidas con el borde y el relleno incluidos, solo dentro de los paneles:
   una tarjeta de ancho 100% con relleno no se sale de la conversacion. */
.np-menu *,
.np-menu *::before,
.np-menu *::after,
.np-asesor *,
.np-asesor *::before,
.np-asesor *::after {
	box-sizing: border-box;
}

.np-menu::backdrop,
.np-asesor::backdrop {
	background: rgba(13, 13, 13, 0.55);
	animation: np-paneles-velo 0.3s ease both;
}

@keyframes np-paneles-velo {
	from { opacity: 0; }
}

html:has(.np-menu[open]),
html:has(.np-asesor[open]),
html.np-asesor-abierto {
	overflow: hidden;
}

.np-menu :focus-visible,
.np-asesor :focus-visible {
	outline: 2px solid var(--np-p-tinta);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   1. El menu del celular: un panel que entra por la derecha y llena la
   pantalla con cosas utiles.
   ------------------------------------------------------------------ */

.np-menu {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(27rem, 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0 0 0 auto;
	background: var(--np-p-blanco);
	overflow: hidden;
}

.np-menu[open] { display: flex; }

.np-menu__marco {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--np-p-blanco);
}

.np-menu__cabeza {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1.25rem 0.6rem;
	background: var(--np-p-blanco);
	border-bottom: 1px solid var(--np-p-linea);
}

.np-menu__marca {
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--np-p-tinta);
	text-decoration: none;
}

.np-menu__cerrar {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.75rem;
	padding: 0 0.95rem;
	background: none;
	border: 1px solid var(--np-p-tinta);
	color: var(--np-p-tinta);
	font: 700 0.75rem/1 var(--np-p-texto);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.np-menu__cerrar svg { width: 1.125rem; height: 1.125rem; }

.np-menu__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-menu__lista li { border-bottom: 1px solid var(--np-p-linea); }

.np-menu__enlace {
	display: grid;
	grid-template-columns: 3.25rem 1fr auto;
	align-items: center;
	gap: 1rem;
	min-height: 4.25rem;
	padding: 0.5rem 1.25rem;
	color: var(--np-p-tinta);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.14s ease;
}

.np-menu__enlace:hover { text-decoration: none; }

@media (hover: hover) {
	.np-menu__enlace:hover { background: var(--np-p-hueso); }
}

.np-menu__enlace:active { background: var(--np-p-hueso); }

/* La pagina en la que estas: una raya verde limon a la izquierda. */
.np-menu__enlace[aria-current="page"] { box-shadow: inset 4px 0 0 var(--np-p-pelota); }

.np-menu__foto,
.np-menu__icono {
	width: 3.25rem;
	height: 3.25rem;
	background: var(--np-p-hueso);
}

.np-menu__foto {
	display: block;
	object-fit: contain;
	border: 1px solid var(--np-p-linea);
}

.np-menu__icono {
	display: grid;
	place-items: center;
}

.np-menu__icono svg { width: 1.375rem; height: 1.375rem; }

.np-menu__texto {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.np-menu__nombre {
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.np-menu__extra {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--np-p-apagado);
}

.np-menu__flecha {
	display: grid;
	place-items: center;
	color: var(--np-p-apagado);
}

.np-menu__flecha svg { width: 1.25rem; height: 1.25rem; }

/* La entrada al asesor */
.np-menu__asesor {
	margin: 1.5rem 1.25rem 0;
	padding: 1.25rem 1.15rem 1.35rem;
	background: var(--np-p-tinta);
	color: var(--np-p-blanco);
}

.np-menu__asesor-titulo {
	margin: 0;
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.np-menu__asesor-texto {
	margin: 0.35rem 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
}

.np-menu__asesor-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.75rem 1.15rem;
	background: var(--np-p-pelota);
	color: var(--np-p-tinta);
	font: 700 0.9375rem/1.2 var(--np-p-texto);
	text-decoration: none;
}

.np-menu__asesor-boton:hover { color: var(--np-p-tinta); text-decoration: none; }

.np-menu__asesor-boton svg { width: 1.125rem; height: 1.125rem; }

.np-menu .np-menu__asesor-boton:focus-visible { outline-color: var(--np-p-pelota); }

.np-menu__asesor-previa {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.8);
}

.np-menu__asesor-previa a {
	color: var(--np-p-pelota);
	font-weight: 700;
	text-decoration: none;
}

/* Las marcas */
.np-menu__marcas { padding: 1.5rem 1.25rem 0; }

.np-menu__titulo {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--np-p-apagado);
}

.np-menu__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.np-menu__chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--np-p-tinta);
	color: var(--np-p-tinta);
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.14s ease, color 0.14s ease;
}

.np-menu__chip:hover,
.np-menu__chip:active {
	background: var(--np-p-tinta);
	color: var(--np-p-blanco);
	text-decoration: none;
}

/* Lo de abajo siempre al fondo, con aire antes. */
.np-menu__marco > :nth-last-child(2) { margin-bottom: 1.5rem; }

.np-menu__pie {
	display: grid;
	gap: 0.75rem;
	margin-top: auto;
	padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
	background: var(--np-p-hueso);
	border-top: 1px solid var(--np-p-linea);
	text-align: center;
}

.np-menu__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	background: var(--np-p-pista);
	color: var(--np-p-blanco);
	font: 700 0.9375rem/1.2 var(--np-p-texto);
	text-decoration: none;
}

.np-menu__whatsapp:hover { color: var(--np-p-blanco); text-decoration: none; }

.np-menu__whatsapp svg { width: 1.25rem; height: 1.25rem; }

.np-menu__contacto {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--np-p-apagado);
}

.np-menu__cuenta {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
}

.np-menu__cuenta a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--np-p-tinta);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

/* ------------------------------------------------------------------
   2. El asesor de palas: en computadora una ventana al centro; en
   celular, la pantalla entera.
   ------------------------------------------------------------------ */

.np-asesor {
	width: calc(100% - 2rem);
	max-width: 36rem;
	height: min(48rem, 92vh);
	max-height: 92vh;
	margin: auto;
	background: var(--np-p-hueso);
	overflow: hidden;
}

.np-asesor[open] { display: flex; }

@media (max-width: 640px) {
	.np-asesor {
		width: 100%;
		max-width: 100%;
		height: 100%;
		height: 100dvh;
		max-height: 100%;
		max-height: 100dvh;
		margin: 0;
	}
}

.np-asesor__marco {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--np-p-hueso);
}

.np-asesor__cabeza {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.85rem 1.1rem;
	background: var(--np-p-tinta);
	color: var(--np-p-blanco);
}

.np-asesor__cabeza .np-asesor-cara {
	width: 2.5rem;
	height: 2.5rem;
}

.np-asesor__cabeza .np-asesor-cara svg { width: 1.05rem; }

.np-asesor__quien {
	flex: 1 1 auto;
	min-width: 0;
}

.np-asesor__titulo {
	margin: 0;
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.15;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.np-asesor__sub {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.72);
}

.np-asesor__cerrar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--np-p-blanco);
	cursor: pointer;
}

.np-asesor__cerrar svg { width: 1.375rem; height: 1.375rem; }

.np-asesor .np-asesor__cerrar:focus-visible { outline-color: var(--np-p-pelota); }

.np-asesor__progreso {
	flex: 0 0 auto;
	height: 4px;
	background: var(--np-p-linea);
	overflow: hidden;
}

.np-asesor__progreso span {
	display: block;
	height: 100%;
	background: var(--np-p-pista);
	transform: scaleX(0.04);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.np-asesor__charla {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.1rem 1rem 1.3rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--np-p-hueso);
}

.np-asesor__burbuja {
	max-width: 88%;
	padding: 0.7rem 0.95rem;
	font-size: 1.0625rem;
	line-height: 1.45;
}

.np-asesor__burbuja p { margin: 0; }

.np-asesor__burbuja--bot {
	align-self: flex-start;
	background: var(--np-p-blanco);
	border: 1px solid var(--np-p-linea);
}

.np-asesor__pregunta {
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.35;
	border-color: var(--np-p-tinta);
}

.np-asesor__burbuja--tu {
	align-self: flex-end;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: var(--np-p-tinta);
	color: var(--np-p-blanco);
	font-weight: 700;
	transform-origin: top left;
}

.np-asesor__cambiar {
	min-height: 2rem;
	padding: 0.15rem 0 0.15rem 0.85rem;
	background: none;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--np-p-pelota);
	font: 700 0.75rem/1 var(--np-p-texto);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.np-asesor .np-asesor__cambiar:focus-visible { outline-color: var(--np-p-pelota); }

.np-asesor__escribe {
	display: inline-flex;
	gap: 0.32rem;
	padding: 0.95rem 1rem;
}

.np-asesor__escribe span {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--np-p-apagado);
	animation: np-asesor-punto 1s infinite ease-in-out;
}

.np-asesor__escribe span:nth-child(2) { animation-delay: 0.15s; }
.np-asesor__escribe span:nth-child(3) { animation-delay: 0.3s; }

@keyframes np-asesor-punto {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
	40% { transform: translateY(-4px); opacity: 1; }
}

.np-asesor__repaso {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.6rem;
}

.np-asesor__repaso i {
	width: 0.7rem;
	height: 0.7rem;
	background: var(--np-p-linea);
	animation: np-asesor-repaso 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 85ms);
}

@keyframes np-asesor-repaso {
	0% { background: var(--np-p-linea); transform: scale(1); }
	45% { background: var(--np-p-pelota); transform: scale(1.25); }
	100% { background: var(--np-p-pista); transform: scale(1); }
}

/* Las respuestas: botones de lado a lado, letra grande */
.np-asesor__opciones {
	flex: 0 0 auto;
	display: grid;
	gap: 0.55rem;
	padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
	background: var(--np-p-blanco);
	border-top: 1px solid var(--np-p-linea);
}

.np-asesor__opciones:empty { display: none; }

@media (min-width: 641px) {
	.np-asesor__opciones--cuatro { grid-template-columns: 1fr 1fr; }
}

.np-asesor__opcion {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	min-height: 3.6rem;
	padding: 0.7rem 1rem;
	text-align: left;
	background: var(--np-p-blanco);
	color: var(--np-p-tinta);
	border: 1px solid var(--np-p-tinta);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

@media (hover: hover) {
	.np-asesor__opcion:hover { background: var(--np-p-hueso); }
}

.np-asesor__opcion:active { transform: scale(0.985); }

.np-asesor__opcion--elegida,
.np-asesor__opcion--elegida:hover {
	background: var(--np-p-tinta);
	color: var(--np-p-blanco);
}

.np-asesor__opcion:disabled { cursor: default; }

.np-asesor__icono {
	flex: 0 0 1.6rem;
	width: 1.6rem;
	height: 1.6rem;
}

.np-asesor__opcion-texto {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.np-asesor__opcion-titulo {
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.np-asesor__opcion-detalle {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--np-p-apagado);
}

.np-asesor__opcion--elegida .np-asesor__opcion-detalle { color: rgba(255, 255, 255, 0.75); }

/* El resultado */
.np-asesor__resultado {
	max-width: 100%;
	width: 100%;
	padding: 1.05rem;
	border-color: var(--np-p-tinta);
}

.np-asesor__tu-pala {
	margin: 0 0 0.6rem !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--np-p-pista);
}

.np-asesor__pala {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
	align-items: center;
}

.np-asesor__foto {
	width: 7.5rem;
	height: 7.5rem;
	object-fit: contain;
	background: var(--np-p-blanco);
	border: 1px solid var(--np-p-linea);
}

.np-asesor__foto--vacia { display: block; background: var(--np-p-hueso); }

.np-asesor__marca {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--np-p-apagado);
}

.np-asesor__nombre {
	margin: 0.15rem 0 0.35rem;
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.np-asesor__nombre:focus { outline: none; }

.np-asesor__precio {
	font-family: var(--np-p-display);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.2;
}

.np-asesor__porque {
	display: grid;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.np-asesor__porque li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 1rem;
	line-height: 1.45;
}

.np-asesor__palomita {
	flex: 0 0 1.3rem;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.1rem;
	color: var(--np-p-pista);
}

.np-asesor__cita {
	margin: 1rem 0 0 !important;
	padding: 0.8rem 0.95rem;
	background: var(--np-p-hueso);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.np-asesor__cita-quien {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--np-p-apagado);
}

.np-asesor__compra {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem;
	margin-top: 1rem;
}

.np-asesor .np-asesor__agregar,
.np-asesor .np-asesor__ver {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.75rem 1.1rem;
	border-radius: 0;
	font: 700 1rem/1.2 var(--np-p-texto);
	text-decoration: none;
}

.np-asesor .np-asesor__agregar {
	background: var(--np-p-tinta);
	color: var(--np-p-blanco);
	border: 1px solid var(--np-p-tinta);
}

.np-asesor .np-asesor__ver {
	background: var(--np-p-blanco);
	color: var(--np-p-tinta);
	border: 1px solid var(--np-p-tinta);
}

.np-asesor__ver-flecha,
.np-asesor__otra-flecha {
	width: 1.1rem;
	height: 1.1rem;
}

.np-asesor__bloque {
	margin-top: 1.15rem;
	padding-top: 0.95rem;
	border-top: 1px solid var(--np-p-linea);
}

.np-asesor__bloque-titulo {
	margin: 0 0 0.55rem !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--np-p-apagado);
}

.np-asesor__paquete,
.np-asesor__otra {
	display: block;
	margin-bottom: 0.45rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--np-p-linea);
	color: var(--np-p-tinta);
	text-decoration: none;
	transition: border-color 0.14s ease;
}

.np-asesor__paquete:hover,
.np-asesor__otra:hover {
	border-color: var(--np-p-tinta);
	text-decoration: none;
}

.np-asesor__paquete-cabeza {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-weight: 700;
}

.np-asesor__paquete-frase {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--np-p-apagado);
}

.np-asesor__otra {
	display: grid;
	grid-template-columns: 3.5rem 1fr auto;
	gap: 0.8rem;
	align-items: center;
	padding: 0.5rem 0.7rem;
}

.np-asesor__otra-foto {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
	background: var(--np-p-blanco);
}

.np-asesor__otra-nombre {
	display: block;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.np-asesor__otra-precio {
	display: block;
	font-size: 0.8125rem;
	color: var(--np-p-apagado);
}

.np-asesor__opciones--final { grid-template-columns: 1fr; }

.np-asesor__humano {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	background: var(--np-p-pista);
	color: var(--np-p-blanco);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.np-asesor__otra-vez {
	min-height: 2.75rem;
	background: none;
	border: 0;
	color: var(--np-p-tinta);
	font: 700 0.9375rem/1.2 var(--np-p-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

@media (max-width: 380px) {
	.np-asesor__pala { grid-template-columns: 6rem 1fr; }
	.np-asesor__foto { width: 6rem; height: 6rem; }
	.np-asesor__compra { grid-template-columns: 1fr; }
}

/* Quien pidio menos movimiento: sin puntos que brincan ni barras que
   corren. Las animaciones de JavaScript tambien se apagan. */
@media (prefers-reduced-motion: reduce) {
	.np-menu::backdrop,
	.np-asesor::backdrop,
	.np-asesor__escribe span,
	.np-asesor__repaso i {
		animation: none;
	}

	.np-asesor__progreso span,
	.np-asesor__opcion {
		transition: none;
	}

	.np-asesor__repaso i { background: var(--np-p-pista); }
}