/* Noble Venta — polish general de layout, independiente de WooCommerce.
   Espaciado responsive con clamp() en vez de padding fijo en px por bloque,
   así las secciones respiran en desktop sin sentirse enormes en mobile. */

/* Transiciones de navegación nativas del navegador (View Transitions API):
   en vez del "flash" blanco típico de recargar una página completa al
   cambiar de categoría/producto, el navegador hace un cross-fade suave
   entre la página vieja y la nueva. No requiere JS ni convertir el sitio
   en una SPA (que sería mucho más riesgoso sobre WooCommerce/carrito) —
   es progresive enhancement puro: en navegadores que no lo soportan
   (Firefox, Safari viejo) simplemente no pasa nada, navega normal. */
@view-transition {
	navigation: auto;
}

/* Logo: SVG inline (no <img>) para heredar la tipografía Outfit ya cargada
   en la página — un <img src="logo.svg"> se renderiza en un documento
   aparte sin acceso a los @font-face del sitio y el wordmark cae a una
   fuente de sistema distinta. */
.nv-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;
}
.nv-logo svg {
	height: clamp(32px, 6vw, 44px);
	width: auto;
}
.nv-logo--footer {
	margin-bottom: 12px;
}
.nv-logo--footer svg {
	height: 40px;
}

/* Header pegajoso (como el mockup). El sticky va en el <header> completo
   (topstrip + fila logo/buscador/nav + pills, todo junto) y no solo en un
   div interno — WordPress genera el <header> del theme con la altura justa
   de su contenido, así que un position:sticky en un hijo suyo se "queda sin
   contenedor" casi enseguida al hacer scroll y deja de pegarse. Poniéndolo
   en el <header> mismo, su "contenedor" pasa a ser .wp-site-blocks (alto de
   toda la página), que sí le da recorrido real para quedarse pegado. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.nv-sticky-header {
	/* Sin backdrop-filter a propósito: crea un "containing block" para
	   cualquier descendiente position:fixed (como el modal del menú mobile
	   de WordPress), lo que lo encogía a los límites de este header en vez
	   de cubrir toda la pantalla. El fondo ya es 97% opaco, así que el
	   blur no se notaba casi nada. */
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

/* Fila de accesos rápidos a categorías, debajo del header (como el mockup:
   scroll horizontal en mobile, "Todo el catálogo" siempre resaltado ya que
   estas son links reales a cada categoría, no un filtro JS de una sola
   página). */
/* Barra completa a lo ancho de la pantalla (fondo + borde), con el
   contenido adentro centrado al mismo ancho/margen que el resto del sitio
   (1280px) — así el primer pill queda alineado con el logo y con las
   secciones de abajo, en vez de pegado a un padding fijo propio. */
.nv-header-pills {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}
.nv-header-pills-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 24px;
	overflow-x: auto;
	scrollbar-width: none;
}
.nv-header-pills-inner::-webkit-scrollbar {
	display: none;
}
.nv-pill {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border: 1px solid transparent;
	transition: background 0.15s ease, color 0.15s ease;
}
.nv-pill:hover {
	background: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}
.nv-pill--active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}
.nv-pill--active:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}
.nv-pill--offer {
	background: var(--wp--preset--color--mascotas-mist);
	color: var(--wp--preset--color--mascotas);
	border-color: var(--wp--preset--color--mascotas-mist);
}
.nv-pill--offer:hover {
	background: #fef3c7;
	color: var(--wp--preset--color--mascotas);
}

.nv-footer {
	padding-top: clamp(40px, 6vw, 64px);
	padding-bottom: clamp(24px, 4vw, 32px);
}
.nv-footer a {
	color: var(--wp--preset--color--surface);
	opacity: 0.85;
	text-decoration: none;
}
.nv-footer a:hover {
	opacity: 1;
	text-decoration: underline;
}
.nv-footer ul.wp-block-list {
	list-style: none;
	padding-left: 0;
}
.nv-footer ul.wp-block-list li {
	margin-bottom: 8px;
}
/* Teléfono/email son opcionales (shortcodes [nv_phone_link]/[nv_email_link])
   — si el administrador no los cargó en Noble Venta → Contacto, el <li>
   queda vacío y se oculta solo en vez de mostrar un bullet sin texto. */
.nv-footer ul.wp-block-list li:empty {
	display: none;
}
/* Botón de WhatsApp mayorista — sale de la lista de links de "Ayuda" y
   pasa a ser un botón pill propio (fondo claro, invertido respecto al
   verde del footer, si no un botón "primary" normal se perdería contra
   el mismo fondo verde). */
.nv-footer-whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 10px 20px !important;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary) !important;
	font-weight: 700;
	font-size: 0.85rem;
	opacity: 1 !important;
	text-decoration: none !important;
	transition: background 0.15s ease;
}
.nv-footer-whatsapp-btn:hover {
	background: var(--wp--preset--color--humanos-mist);
	text-decoration: none !important;
}

.nv-footer-legal {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #ffffff33;
	font-size: 0.8rem;
	opacity: 0.65;
	line-height: 1.6;
}
.nv-footer-legal p {
	margin: 0 0 4px;
}

.nv-topstrip {
	padding-top: 9px;
	padding-bottom: 9px;
}
.nv-topstrip-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.8rem;
}
.nv-topstrip-main {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nv-topstrip-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #34D399;
	flex-shrink: 0;
	animation: nv-pulse 1.8s ease-in-out infinite;
}
@keyframes nv-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.3); }
}
.nv-topstrip-extra {
	display: none;
	align-items: center;
	gap: 20px;
	font-size: 0.76rem;
	opacity: 0.85;
	flex-shrink: 0;
}
@media (min-width: 782px) {
	.nv-topstrip-extra {
		display: flex;
	}
}

.nv-section {
	padding-top: clamp(32px, 6vw, 64px);
	padding-bottom: clamp(32px, 6vw, 64px);
}

/* Panel visual del hero: proporción estable en vez de una altura mínima fija
   que en mobile terminaba mucho más alta de lo previsto. */
.nv-hero-visual {
	aspect-ratio: 4 / 3;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 782px) {
	.nv-hero-visual {
		aspect-ratio: 16 / 9;
		margin-top: 24px;
	}
}

/* Foto de producto dentro del panel del hero: object-fit para que encaje
   bien tanto en el recuadro 4:3 (desktop) como en el 16:9 bajito (mobile),
   sea cual sea el alto/ancho real de la foto. */
.nv-hero-visual-img {
	margin: 0;
	height: 78%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nv-hero-visual-img img {
	max-height: 100%;
	max-width: 70%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);
}

/* Chips de categoría: que se vean como chips, no como botones de ancho
   completo apilados en mobile. Mismo comportamiento de color en hover que
   cualquier otro botón del sitio (nunca el negro por defecto del navegador). */
.wp-block-buttons .wp-block-button.is-style-outline {
	flex-grow: 0;
}
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	padding: 8px 18px;
	font-size: 0.9rem;
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--border);
}
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}

/* Cinturón de seguridad: cualquier link/botón del sitio que use los colores
   de marca pasa a primary-hover en hover, nunca al negro por defecto. */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--surface);
}

/* Encabezados: que no se vean desproporcionados en pantallas chicas. */
@media (max-width: 480px) {
	.has-xx-large-font-size {
		font-size: 2rem !important;
	}
	.has-x-large-font-size {
		font-size: 1.4rem !important;
	}
}

/* Buscador del header: ancho de contenido, no que se estire para llenar el
   espacio entre el logo y la navegación. */
.nv-header-search {
	max-width: 480px;
	width: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
}
.nv-header-search .wp-block-search__inside-wrapper {
	border-radius: 999px;
	border: 1px solid transparent;
	background: var(--wp--preset--color--paper);
	box-shadow: inset 0 1px 2px rgba(15, 57, 53, 0.05);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.nv-header-search .wp-block-search__inside-wrapper:hover {
	background: var(--wp--preset--color--border);
}
.nv-header-search .wp-block-search__inside-wrapper:focus-within {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--humanos);
	box-shadow: 0 0 0 3px var(--wp--preset--color--humanos-mist);
}
.nv-header-search .wp-block-search__input {
	background: transparent;
	padding-left: 18px;
	font-size: 0.9rem;
}
.nv-header-search .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	width: 38px;
	height: 38px;
	min-width: 0;
	padding: 0;
	margin: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nv-header-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-hover);
}
@media (max-width: 680px) {
	.nv-header-search {
		display: none;
	}
}

/* Autocomplete del buscador — panel flotante debajo del input, poblado por
   assets/header.js contra la Store API de WooCommerce (/wc/store/v1/products). */
.nv-search-autocomplete {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 12px 32px -8px rgba(15, 57, 53, 0.2);
	padding: 6px;
	z-index: 60;
	max-height: 70vh;
	overflow-y: auto;
}
.nv-search-autocomplete__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: background 0.12s ease;
}
.nv-search-autocomplete__item:hover {
	background: var(--wp--preset--color--paper);
}
.nv-search-autocomplete__item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--wp--preset--color--paper);
	flex-shrink: 0;
}
.nv-search-autocomplete__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.nv-search-autocomplete__name {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nv-search-autocomplete__price {
	font-size: 0.78rem;
	color: var(--wp--preset--color--humanos);
	font-weight: 700;
}
.nv-search-autocomplete__see-all {
	display: block;
	text-align: center;
	padding: 10px 8px 6px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 4px;
}
.nv-search-autocomplete__see-all:hover {
	text-decoration: underline;
}
.nv-search-autocomplete__empty {
	padding: 14px 10px;
	margin: 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-soft);
	text-align: center;
}

/* Botón "Ver catálogo" del hero y CTAs generales: ancho de contenido, no
   forzado a 100% — solo los botones de "Agregar al carrito" dentro de una
   tarjeta de producto ocupan el ancho completo (regla en woocommerce.css). */
.wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	padding: 12px 28px;
}

/* ==================== Hero: eyebrow, highlights, card flotante ==================== */

.nv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--humanos-mist);
	color: var(--wp--preset--color--humanos);
	font-size: 0.8rem;
	font-weight: 600;
}
.nv-eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--humanos);
	flex-shrink: 0;
}

.nv-hero-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.nv-hero-highlight {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.nv-hero-highlight-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.nv-hero-highlight-title svg {
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--humanos);
	flex-shrink: 0;
}
.nv-hero-highlight-sub {
	font-size: 0.72rem;
	color: var(--wp--preset--color--ink-soft);
}

.nv-hero-visual-wrap {
	position: relative;
}

.nv-hero-float-card {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -18px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--wp--preset--color--surface);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 12px 28px -8px rgba(15, 57, 53, 0.28);
}
.nv-hero-float-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--humanos);
}
.nv-hero-float-icon svg {
	width: 18px;
	height: 18px;
}
.nv-hero-float-text {
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.4;
}
.nv-hero-float-text strong {
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary);
}
@media (max-width: 782px) {
	.nv-hero-float-card {
		position: static;
		margin-top: 14px;
		box-shadow: 0 1px 3px rgba(15, 57, 53, 0.08);
	}
}

/* ==================== Grid de categorías con ícono ==================== */

.nv-cat-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
.nv-cat-header h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 4px;
}
.nv-cat-header p {
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
.nv-cat-header-tag {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--humanos);
	white-space: nowrap;
}
/* "Ver todo el catálogo →" — reusa el mismo header flex de Categorías
   (título a la izquierda, link/tag a la derecha) para secciones de
   producto como "Los más elegidos". */
.nv-cat-header p:last-child a {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}
.nv-cat-header p:last-child a:hover {
	text-decoration: underline;
}
@media (max-width: 600px) {
	.nv-cat-header-tag {
		display: none;
	}
}
/* Grid fijo (no flex-wrap) porque siempre son 7 tiles conocidas — igual
   que el mockup: 2 columnas en mobile, 3 en tablet, 5 en desktop. La
   sección va sobre fondo "surface" (blanco) y las tiles en "paper" (gris
   muy sutil) para que se note el contraste, al revés que las tarjetas de
   producto (blancas sobre fondo paper). */
.nv-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 24px;
}
@media (min-width: 600px) {
	.nv-cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 900px) {
	.nv-cat-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}
.nv-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 18px 10px;
	border-radius: 12px;
	background: var(--wp--preset--color--paper);
	border: 1px solid transparent;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.nv-cat-tile:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--humanos-mist);
	border-color: var(--wp--preset--color--humanos);
}
.nv-cat-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--humanos);
	box-shadow: 0 1px 3px rgba(15, 57, 53, 0.08);
	margin-bottom: 8px;
	transition: transform 0.15s ease;
}
.nv-cat-tile:hover .nv-cat-icon {
	transform: scale(1.08);
}
.nv-cat-icon svg {
	width: 24px;
	height: 24px;
}
.nv-cat-tile h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.nv-cat-tile-sub {
	font-size: 0.68rem;
	color: var(--wp--preset--color--ink-soft);
	margin-top: 1px;
}
.nv-cat-tile--offer {
	grid-column: span 2;
	background: var(--wp--preset--color--mascotas-mist);
	border-color: #fde8c2;
}
.nv-cat-tile--offer .nv-cat-icon {
	color: var(--wp--preset--color--mascotas);
}
.nv-cat-tile--offer h3 {
	color: #92400e;
}
.nv-cat-tile--offer:hover {
	border-color: var(--wp--preset--color--mascotas);
	background: var(--wp--preset--color--mascotas-mist);
}
@media (min-width: 600px) {
	.nv-cat-tile--offer {
		grid-column: span 1;
	}
}

/* ==================== Franja de confianza (4 columnas, después de "Los más elegidos") ==================== */

.nv-trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 32px;
}
.nv-trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 240px;
}
.nv-trust-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--humanos-mist);
	color: var(--wp--preset--color--humanos);
}
.nv-trust-icon svg {
	width: 20px;
	height: 20px;
}
.nv-trust-item span:last-child {
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}
.nv-trust-item span:last-child strong {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: 0.88rem;
}

/* ==================== Sección "Banners" (carrusel publicitario a todo el ancho, estilo Mercado Libre) ====================
   El wp:group que envuelve este shortcode en la portada usa layout "default"
   (no "constrained") a propósito, para que el carrusel pueda ir de punta a
   punta de la pantalla. Sin título arriba y sin padding-top (pisa el de
   .nv-section) para que quede pegado directo al header. */

.nv-banners-section {
	padding-top: 0;
}
.nv-banners-carousel-wrap {
	position: relative;
}
.nv-banners-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	padding: 0;
	margin: 0;
	scrollbar-width: none;
}
.nv-banners-track::-webkit-scrollbar {
	display: none;
}
/* Banner a todo el ancho con una altura estable (no una proporción fija):
   con aspect-ratio puro, una pantalla ultra-wide dejaría el banner
   larguísimo pero bajito; con una altura en clamp() se ve bien de mobile a
   pantallas grandes. Cualquier imagen que suba el administrador se recorta
   sola con object-fit:cover, sin exigirle una medida exacta en píxeles. */
.nv-banner-card {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	height: clamp(220px, 34vw, 440px);
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}
/* Degradado abajo — asegura que los puntitos (y las flechas, si quedan
   sobre esta zona) se lean bien sea cual sea la imagen que suba el
   administrador (clara, oscura, con o sin contraste ahí abajo). */
.nv-banner-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
	pointer-events: none;
}
.nv-banner-card a {
	display: block;
	width: 100%;
	height: 100%;
}
.nv-banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 6s ease-out;
}
.nv-banner-card:hover .nv-banner-img {
	transform: scale(1.04);
}
/* Flechas superpuestas sobre la imagen (no al costado) — como cualquier
   carrusel publicitario a todo el ancho: no hay lugar afuera de la imagen
   para ponerlas. */
.nv-banner-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: none;
	background: rgba(15, 57, 53, 0.45);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: background 0.15s ease;
	z-index: 2;
}
.nv-banner-nav:hover {
	background: rgba(15, 57, 53, 0.7);
}
.nv-banner-nav--prev {
	left: 16px;
}
.nv-banner-nav--next {
	right: 16px;
}
/* Puntitos de posición — el estándar de cualquier carrusel moderno para
   saber cuántos banners hay y en cuál estás parado. */
.nv-banners-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.nv-banners-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}
.nv-banners-dot--active {
	width: 22px;
	background: #fff;
}
@media (max-width: 600px) {
	.nv-banner-nav {
		width: 36px;
		height: 36px;
		font-size: 1.25rem;
	}
	.nv-banner-nav--prev {
		left: 8px;
	}
	.nv-banner-nav--next {
		right: 8px;
	}
}