/* ============================================================
   Catálogo B2B — CSS propio (sin Tailwind CDN)
   Todas las utilidades que usan las plantillas, compiladas a
   mano para que la página cargue rápido. Namespace: .b2b-tw
   ============================================================ */

/* ---- Íconos Material Symbols ---- */
.b2b-tw .material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	font-size: 24px;
	line-height: 1;
	vertical-align: middle;
	display: inline-block;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
}

/* ---- Reset mínimo dentro del scope ---- */
.b2b-tw *, .b2b-tw *::before, .b2b-tw *::after { box-sizing: border-box; }

/* ---- Colores de la paleta ---- */
.b2b-tw .bg-white { background-color: #fff; }
.b2b-tw .bg-\[\#000a60\] { background-color: #000a60; }
.b2b-tw .bg-\[\#1c1b1b\] { background-color: #1c1b1b; }
.b2b-tw .bg-\[\#f0edec\] { background-color: #f0edec; }
.b2b-tw .bg-\[\#f6f3f2\] { background-color: #f6f3f2; }
.b2b-tw .bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.b2b-tw .text-white { color: #fff; }
.b2b-tw .text-inherit { color: inherit; }
.b2b-tw .text-\[\#000a60\] { color: #000a60; }
.b2b-tw .text-\[\#454652\] { color: #454652; }
.b2b-tw .text-\[\#767683\] { color: #767683; }
.b2b-tw .border-\[\#000a60\] { border-color: #000a60; }
.b2b-tw .border-\[\#c6c5d4\] { border-color: #c6c5d4; }
.b2b-tw .border-white { border-color: #fff; }
.b2b-tw .border-transparent { border-color: transparent; }

/* ---- Layout: flex / grid ---- */
.b2b-tw .flex { display: flex; }
.b2b-tw .grid { display: grid; }
.b2b-tw .block { display: block; }
.b2b-tw .hidden { display: none; }
.b2b-tw .inline-block { display: inline-block; }
.b2b-tw .flex-col { flex-direction: column; }
.b2b-tw .flex-wrap { flex-wrap: wrap; }
.b2b-tw .flex-1 { flex: 1 1 0%; }
.b2b-tw .flex-shrink-0 { flex-shrink: 0; }
.b2b-tw .items-center { align-items: center; }
.b2b-tw .items-start { align-items: flex-start; }
.b2b-tw .justify-center { justify-content: center; }
.b2b-tw .justify-between { justify-content: space-between; }
.b2b-tw .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.b2b-tw .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- Gaps ---- */
.b2b-tw .gap-2 { gap: 0.5rem; }
.b2b-tw .gap-3 { gap: 0.75rem; }
.b2b-tw .gap-4 { gap: 1rem; }
.b2b-tw .gap-6 { gap: 1.5rem; }
.b2b-tw .gap-10 { gap: 2.5rem; }
.b2b-tw .gap-12 { gap: 3rem; }
.b2b-tw .gap-x-16 { column-gap: 4rem; }
.b2b-tw .gap-y-10 { row-gap: 2.5rem; }

/* ---- Espaciado vertical entre hijos ---- */
.b2b-tw .space-y-4 > * + * { margin-top: 1rem; }
.b2b-tw .space-y-5 > * + * { margin-top: 1.25rem; }
.b2b-tw .space-y-6 > * + * { margin-top: 1.5rem; }
.b2b-tw .space-y-8 > * + * { margin-top: 2rem; }

/* ---- Anchos / altos ---- */
.b2b-tw .w-full { width: 100%; }
.b2b-tw .w-auto { width: auto; }
.b2b-tw .w-9 { width: 2.25rem; }
.b2b-tw .w-11 { width: 2.75rem; }
.b2b-tw .w-14 { width: 3.5rem; }
.b2b-tw .w-16 { width: 4rem; }
.b2b-tw .w-20 { width: 5rem; }
.b2b-tw .w-36 { width: 9rem; }
.b2b-tw .h-9 { height: 2.25rem; }
.b2b-tw .h-11 { height: 2.75rem; }
.b2b-tw .h-14 { height: 3.5rem; }
.b2b-tw .h-16 { height: 4rem; }
.b2b-tw .h-20 { height: 5rem; }
.b2b-tw .max-w-full { max-width: 100%; }
.b2b-tw .max-h-full { max-height: 100%; }
.b2b-tw .max-w-3xl { max-width: 48rem; }
.b2b-tw .max-w-\[1680px\] { max-width: 1680px; }
.b2b-tw .h-auto { height: auto; }

/* ---- Posición ---- */
.b2b-tw .relative { position: relative; }
.b2b-tw .absolute { position: absolute; }
.b2b-tw .left-3 { left: 0.75rem; }
.b2b-tw .right-3 { right: 0.75rem; }
.b2b-tw .right-4 { right: 1rem; }
.b2b-tw .top-1\/2 { top: 50%; }
.b2b-tw .-translate-y-1\/2 { transform: translateY(-50%); }
.b2b-tw .z-10 { z-index: 10; }

/* ---- Padding / Margin ---- */
.b2b-tw .p-1\.5 { padding: 0.375rem; }
.b2b-tw .p-5 { padding: 1.25rem; }
.b2b-tw .p-6 { padding: 1.5rem; }
.b2b-tw .p-8 { padding: 2rem; }
.b2b-tw .px-4 { padding-left: 1rem; padding-right: 1rem; }
.b2b-tw .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.b2b-tw .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.b2b-tw .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.b2b-tw .mx-auto { margin-left: auto; margin-right: auto; }
.b2b-tw .mt-2 { margin-top: 0.5rem; }
.b2b-tw .mt-4 { margin-top: 1rem; }
.b2b-tw .mb-2 { margin-bottom: 0.5rem; }
.b2b-tw .mb-6 { margin-bottom: 1.5rem; }
.b2b-tw .mb-8 { margin-bottom: 2rem; }
.b2b-tw .mb-10 { margin-bottom: 2.5rem; }

/* ---- Tipografía ---- */
.b2b-tw .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.b2b-tw .text-base { font-size: 1rem; line-height: 1.5rem; }
.b2b-tw .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.b2b-tw .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.b2b-tw .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.b2b-tw .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.b2b-tw .text-5xl { font-size: 3rem; line-height: 1; }
.b2b-tw .font-medium { font-weight: 500; }
.b2b-tw .font-semibold { font-weight: 600; }
.b2b-tw .font-bold { font-weight: 700; }
.b2b-tw .uppercase { text-transform: uppercase; }
.b2b-tw .capitalize { text-transform: capitalize; }
.b2b-tw .tracking-tight { letter-spacing: -0.025em; }
.b2b-tw .tracking-wider { letter-spacing: 0.05em; }
.b2b-tw .tracking-widest { letter-spacing: 0.1em; }
.b2b-tw .leading-tight { line-height: 1.25; }
.b2b-tw .leading-relaxed { line-height: 1.625; }
.b2b-tw .no-underline { text-decoration: none; }
.b2b-tw .text-center { text-align: center; }

/* ---- Bordes / radios ---- */
.b2b-tw .border { border-width: 1px; border-style: solid; }
.b2b-tw .border-2 { border-width: 2px; border-style: solid; }
.b2b-tw .border-t { border-top-width: 1px; border-top-style: solid; }
.b2b-tw .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.b2b-tw .border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.b2b-tw .border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; }
.b2b-tw .rounded { border-radius: 0.25rem; }
.b2b-tw .rounded-lg { border-radius: 0.5rem; }
.b2b-tw .rounded-xl { border-radius: 0.75rem; }
.b2b-tw .rounded-full { border-radius: 9999px; }

/* ---- Objeto / imágenes ---- */
.b2b-tw .object-contain { object-fit: contain; }
.b2b-tw .object-cover { object-fit: cover; }
.b2b-tw .overflow-hidden { overflow: hidden; }

/* ---- Sombras ---- */
.b2b-tw .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.b2b-tw .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }

/* ---- Interacción ---- */
.b2b-tw .cursor-pointer { cursor: pointer; }
.b2b-tw .select-none { user-select: none; }
.b2b-tw .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.b2b-tw .transition-colors { transition-property: color, background-color, border-color; transition-duration: 0.15s; }
.b2b-tw .transition-shadow { transition-property: box-shadow; transition-duration: 0.15s; }
.b2b-tw .pointer-events-none { pointer-events: none; }

/* ---- Hover ---- */
.b2b-tw .hover\:bg-\[\#f0edec\]:hover { background-color: #f0edec; }
.b2b-tw .hover\:border-\[\#000a60\]:hover { border-color: #000a60; }
.b2b-tw .hover\:text-\[\#000a60\]:hover { color: #000a60; }
.b2b-tw .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.b2b-tw .group:hover .group-hover\:underline { text-decoration: underline; }

/* ---- Aspect ratio ---- */
.b2b-tw .aspect-square { aspect-ratio: 1 / 1; }
.b2b-tw .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* ============================================================
   Responsive (breakpoint md = 768px)
   ============================================================ */
@media (min-width: 768px) {
	.b2b-tw .md\:flex-row { flex-direction: row; }
	.b2b-tw .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b2b-tw .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.b2b-tw .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.b2b-tw .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.b2b-tw .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.b2b-tw .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.b2b-tw .md\:col-span-2 { grid-column: span 2 / span 2; }
	.b2b-tw .md\:col-span-3 { grid-column: span 3 / span 3; }
	.b2b-tw .md\:col-span-5 { grid-column: span 5 / span 5; }
	.b2b-tw .md\:col-span-7 { grid-column: span 7 / span 7; }
	.b2b-tw .md\:order-1 { order: 1; }
	.b2b-tw .md\:order-2 { order: 2; }
	.b2b-tw .md\:w-56 { width: 14rem; }
	.b2b-tw .md\:w-12 { width: 3rem; }
	.b2b-tw .md\:h-12 { height: 3rem; }
	.b2b-tw .md\:w-20 { width: 5rem; }
	.b2b-tw .md\:h-20 { height: 5rem; }
	.b2b-tw .md\:flex-col { flex-direction: column; }
	.b2b-tw .md\:gap-0 { gap: 0; }
	.b2b-tw .md\:gap-16 { gap: 4rem; }
	.b2b-tw .md\:mb-1 { margin-bottom: 0.25rem; }
	.b2b-tw .md\:p-2 { padding: 0.5rem; }
	.b2b-tw .md\:p-10 { padding: 2.5rem; }
	.b2b-tw .md\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
	.b2b-tw .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
	.b2b-tw .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
	.b2b-tw .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
	.b2b-tw .md\:text-\[36px\] { font-size: 36px; }
	.b2b-tw .md\:text-\[46px\] { font-size: 46px; }
	.b2b-tw .md\:text-5xl { font-size: 3rem; line-height: 1; }
	.b2b-tw .md\:rounded { border-radius: 0.25rem; }
	.b2b-tw .md\:bg-transparent { background-color: transparent; }
	.b2b-tw .md\:sticky { position: sticky; }
	.b2b-tw .md\:top-6 { top: 1.5rem; }
}

@media (min-width: 640px) {
	.b2b-tw .sm\:w-\[320px\] { width: 320px; }
}

/* ============================================================
   Componentes propios del catálogo
   ============================================================ */

.b2b-caja-formulario { width: 100%; }

.b2b-tw .hs-form-frame { width: 100%; min-height: 1500px; }

.b2b-caja-formulario .hs-form-frame,
.b2b-caja-formulario iframe,
.b2b-caja-formulario form,
.b2b-caja-formulario .hs-form,
.b2b-caja-formulario fieldset,
.b2b-caja-formulario .hs-fieldset,
.b2b-caja-formulario .hs-form-field,
.b2b-caja-formulario .input,
.b2b-caja-formulario .field {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.b2b-caja-formulario input:not([type="checkbox"]):not([type="radio"]),
.b2b-caja-formulario select,
.b2b-caja-formulario textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	font-size: 16px !important;
	padding: 12px !important;
}

.b2b-caja-formulario label { font-size: 15px !important; }

@media (max-width: 640px) {
	.b2b-tw .hs-form-frame { min-height: 1900px; }
	.b2b-tw .hs-form-frame iframe { min-height: 1900px !important; }
}

/* --- Arreglo específico para iOS/Safari: el iframe de HubSpot a veces
   queda con altura 0 o invisible. Forzamos que siempre se vea. --- */
.b2b-caja-formulario .hs-form-frame {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	overflow: visible !important;
}
.b2b-caja-formulario iframe {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	min-height: 1500px !important;
	height: auto !important;
	width: 100% !important;
	border: 0 !important;
	-webkit-transform: translateZ(0); /* fuerza repaint en Safari */
}
/* Evitar que algún overflow padre lo recorte en iOS */
.b2b-caja-formulario, .b2b-caja-formulario * {
	-webkit-overflow-scrolling: touch;
}

/* Paginación (clases nativas de WordPress) */
.b2b-tw .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	margin: 0 3px;
	border-radius: 4px;
	border: 1px solid #c6c5d4;
	text-decoration: none;
	color: #1c1b1b;
	font-size: 14px;
}
.b2b-tw .page-numbers.current { background: #000a60; border-color: #000a60; color: #fff; }

/* ---- Utilidades adicionales (catálogo/archivo/tarjetas) ---- */
.b2b-tw .list-none { list-style: none; }
.b2b-tw .m-0 { margin: 0; }
.b2b-tw .p-0 { padding: 0; }
.b2b-tw .min-w-0 { min-width: 0; }
.b2b-tw .max-w-xl { max-width: 36rem; }
.b2b-tw .text-xs { font-size: 0.75rem; line-height: 1rem; }
.b2b-tw .text-\[11px\] { font-size: 11px; }
.b2b-tw .text-\[36px\] { font-size: 36px; }
.b2b-tw .text-\[\#1c1b1b\] { color: #1c1b1b; }
.b2b-tw .mt-1 { margin-top: 0.25rem; }
.b2b-tw .mt-10 { margin-top: 2.5rem; }
.b2b-tw .mb-3 { margin-bottom: 0.75rem; }
.b2b-tw .pb-3 { padding-bottom: 0.75rem; }
.b2b-tw .pb-7 { padding-bottom: 1.75rem; }
.b2b-tw .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.b2b-tw .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.b2b-tw .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.b2b-tw .top-3 { top: 0.75rem; }
.b2b-tw .hover\:bg-\[\#f6f3f2\]:hover { background-color: #f6f3f2; }

@media (min-width: 768px) {
	.b2b-tw .md\:p-8 { padding: 2rem; }
	.b2b-tw .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
}

/* ---- Utilidades adicionales (reorden de bloques + filtros) ---- */
.b2b-tw .max-w-4xl { max-width: 56rem; }
.b2b-tw .w-64 { width: 16rem; }
.b2b-tw .p-4 { padding: 1rem; }
.b2b-tw .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.b2b-tw .gap-x-12 { column-gap: 3rem; }
.b2b-tw .hover\:bg-\[\#000a60\]:hover { background-color: #000a60; }
.b2b-tw .hover\:text-white:hover { color: #fff; }

/* ============================================================
   Ancho completo real (rompe el contenedor del tema Astra)
   El tema mete el contenido en un contenedor con ancho máximo;
   esto estira el catálogo de borde a borde de la ventana.
   ============================================================ */
.b2b-tw {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Evitar barra de scroll horizontal por el ancho completo */
body { overflow-x: hidden; }

/* ---- Flechas de galería (nuevas) ---- */
.b2b-tw .w-14 { width: 3.5rem; }
.b2b-tw .h-14 { height: 3.5rem; }
.b2b-tw .left-4 { left: 1rem; }
.b2b-tw .right-4 { right: 1rem; }
.b2b-tw .hover\:bg-\[\#142182\]:hover { background-color: #142182; }

/* ---- Recuadro de configuración (botón cotizar) ---- */
.b2b-tw .ml-3 { margin-left: 0.75rem; }
.b2b-tw .mb-1 { margin-bottom: 0.25rem; }

/* ---- Tarjetas de categoría con imagen ---- */
.b2b-tw .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.b2b-tw .bottom-0 { bottom: 0; }
.b2b-tw .left-0 { left: 0; }
.b2b-tw .right-0 { right: 0; }
.b2b-tw .mb-12 { margin-bottom: 3rem; }
.b2b-tw .text-5xl { font-size: 3rem; line-height: 1; }
.b2b-tw .text-white\/80 { color: rgba(255,255,255,0.8); }
.b2b-tw .transition-transform { transition-property: transform; transition-duration: 0.15s; }
.b2b-tw .duration-500 { transition-duration: 0.5s; }
.b2b-tw .group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* ============================================================
   Móvil: Título -> Configurador/Info -> Galería
   (el configurador va ANTES que la galería en celular)
   ============================================================ */
@media (max-width: 767px) {
	.b2b-tw .b2b-hero-grid {
		display: flex !important;
		flex-direction: column !important;
	}
	/* La info/configurador va primero */
	.b2b-tw .b2b-hero-grid .b2b-info-col { order: 1 !important; }
	/* La galería va después */
	.b2b-tw .b2b-hero-grid .b2b-galeria-col { order: 2 !important; }
}

/* ---- Submenú de subcategorías al pasar el mouse ---- */
.b2b-tw .b2b-cat-card:hover .b2b-subcats-flotante {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}
.b2b-tw .b2b-subcat-link:hover {
	background: #f0edec;
	color: #000a60;
}

/* ---- Submenú de subcategorías en los chips (al pasar el mouse) ---- */
.b2b-tw .b2b-chip-wrap:hover .b2b-chip-submenu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* ============================================================
   Quitar el espacio (padding) que Astra mete arriba del contenido
   en las páginas del catálogo. Elimina la "franja" bajo el header.
   ============================================================ */
body.b2b-catalogo-activo .site-content .ast-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
body.b2b-catalogo-activo #main,
body.b2b-catalogo-activo .site-content,
body.b2b-catalogo-activo .ast-container {
	padding-top: 0 !important;
}
body.b2b-catalogo-activo .site-content {
	margin-top: 0 !important;
}
/* Astra a veces mete padding en #primary o .content-area */
body.b2b-catalogo-activo #primary,
body.b2b-catalogo-activo .content-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ============================================================
   Menú lateral de categorías (catálogo) + submenús flotantes
   ============================================================ */
.b2b-tw .b2b-cat-item:hover { background: #f0edec; }
.b2b-tw .b2b-subcat-item:hover { background: #f0edec; color: #000a60; }

/* Submenú flotante: aparece al pasar el mouse sobre el grupo */
.b2b-tw .b2b-cat-grupo:hover .b2b-subcat-flotante {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(0) !important;
}

/* En móvil: menú arriba y submenús desplegados (no flotantes, no hay hover) */
@media (max-width: 900px) {
	.b2b-tw .b2b-catalogo-layout { flex-direction: column !important; }
	.b2b-tw .b2b-sidebar {
		flex: 1 1 auto !important;
		width: 100% !important;
		position: static !important;
	}
	/* El flotante pasa a flujo normal, pero OCULTO hasta tocar el padre */
	.b2b-tw .b2b-subcat-flotante {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		margin-left: 0 !important;
		box-shadow: none !important;
		border: none !important;
		border-left: 2px solid #e0dedd !important;
		border-radius: 0 !important;
		margin: 2px 0 6px 14px !important;
		padding: 2px 0 !important;
		min-width: 0 !important;
		display: none !important; /* oculto por defecto en móvil */
	}
	/* Se muestra solo cuando el grupo está "abierto" (al tocar) */
	.b2b-tw .b2b-cat-grupo.b2b-abierto .b2b-subcat-flotante {
		display: block !important;
	}
	/* La flecha sí se ve en móvil, y gira cuando está abierto */
	.b2b-tw .b2b-cat-grupo .material-symbols-outlined {
		display: inline-block !important;
		transition: transform 0.2s;
	}
	.b2b-tw .b2b-cat-grupo.b2b-abierto .material-symbols-outlined {
		transform: rotate(90deg);
	}
}

/* Asegurar que el submenú flotante quede SOBRE los productos */
.b2b-tw .b2b-sidebar { z-index: 50; }
.b2b-tw .b2b-cat-grupo:hover { z-index: 100; position: relative; }
.b2b-tw .b2b-productos-col { position: relative; z-index: 1; }
.b2b-tw .b2b-subcat-flotante { z-index: 100; }