/* Oskupack (Kadence) · estilos que solo van en el sitio, no en el editor.
   En el editor las diapositivas se ven una debajo de la otra, para editarlas; aquí se apilan
   en el mismo lugar y se muestra una a la vez. */

/* ---------- Textos para lectores de pantalla ---------- */

.osku-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* El nombre de cada cliente va en la leyenda de su logo: en el sitio no se muestra (el logo ya
   lo dice) y queda como texto alternativo de la imagen. */
.wp-block-gallery.is-style-logos-clientes > figure.wp-block-image figcaption {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	background: none !important;
}

/* ---------- Carrusel de la portada ---------- */

.osku-carrusel {
	--osku-intervalo: 6s;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.osku-carrusel__diapositivas > .kt-inside-inner-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.osku-carrusel__diapositivas > .kt-inside-inner-col > .osku-diapositiva {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.osku-carrusel__diapositivas > .kt-inside-inner-col > .osku-diapositiva.is-activo {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.7s ease 0.15s, visibility 0s;
}

.osku-carrusel .osku-diapositiva__texto .kt-inside-inner-col > * {
	transform: translateY(14px);
	transition: transform 0.6s ease;
}

.osku-carrusel .osku-diapositiva.is-activo .osku-diapositiva__texto .kt-inside-inner-col > * {
	transform: none;
	transition: transform 0.7s ease 0.15s;
}

.osku-carrusel .osku-diapositiva__img img {
	transform: scale(1.06);
	transition: transform 7s ease-out;
}

.osku-carrusel .osku-diapositiva.is-activo .osku-diapositiva__img img {
	transform: scale(1);
}

/* Grano fino sobre la foto: le quita el aspecto de banco de imágenes. */
.osku-carrusel .osku-diapositiva__foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0.18;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.osku-carrusel .osku-diapositiva__foto::after {
	z-index: 1;
}

/* El sello BRC flota sobre la esquina de la foto. */
.osku-carrusel__diapositivas > .kt-inside-inner-col > .osku-carrusel__sello {
	position: absolute;
	right: 32px;
	bottom: 28px;
	z-index: 3;
	margin: 0 !important;
}

/* ---------- Índice de abajo (lo arma functions.php con el nombre de cada diapositiva) ---------- */

.osku-carrusel__nav {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(var(--osku-n, 4), minmax(0, 1fr)) auto;
	align-items: stretch;
	padding-left: max(0px, calc((100vw - 1220px) / 2 + 2px));
	background: #0f1113;
}

.osku-carrusel__item {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 20px 22px 24px;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	text-align: left;
	font-family: var(--osku-titulos);
	transition: color var(--osku-transicion), background-color var(--osku-transicion);
}

.osku-carrusel__item:hover,
.osku-carrusel__item:focus {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: none;
}

.osku-carrusel__item.is-activo {
	color: #fff;
}

.osku-carrusel__item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}


.osku-carrusel__item-nombre {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Barra de tiempo: se llena en el intervalo del ítem activo; en pausa se congela. */
.osku-carrusel__barra {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.osku-carrusel__barra i {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left;
	background: #2e9e3a;
}

.osku-carrusel__item.is-activo .osku-carrusel__barra i {
	animation: osku-carrusel-barra var(--osku-intervalo) linear forwards;
}

.osku-carrusel.is-pausado .osku-carrusel__barra i {
	animation-play-state: paused;
}

.osku-carrusel.is-quieto .osku-carrusel__item.is-activo .osku-carrusel__barra i {
	animation: none;
	transform: scaleX(1);
}

@keyframes osku-carrusel-barra {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

.osku-carrusel__flechas {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 max(22px, calc((100vw - 1220px) / 2 + 24px)) 0 22px;
}

.osku-carrusel__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	transition: background-color var(--osku-transicion), border-color var(--osku-transicion), transform var(--osku-transicion);
}

.osku-carrusel__flecha:hover,
.osku-carrusel__flecha:focus {
	background: #2e9e3a;
	border-color: #2e9e3a;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: none;
}

.osku-carrusel__flecha:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.osku-carrusel__diapositivas > .kt-inside-inner-col > .osku-carrusel__sello {
		top: calc(100vw * 10 / 16 - 14px);
		right: 16px;
		bottom: auto;
		transform: translateY(-100%);
	}

	.osku-carrusel__nav {
		grid-template-columns: repeat(var(--osku-n, 4), minmax(0, 1fr));
		padding-left: 0;
	}

	.osku-carrusel__flechas {
		display: none;
	}

	.osku-carrusel__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 14px 10px 18px 14px;
	}

	.osku-carrusel__item-nombre {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.osku-carrusel__diapositivas > .kt-inside-inner-col > .osku-diapositiva,
	.osku-carrusel .osku-diapositiva__texto .kt-inside-inner-col > *,
	.osku-carrusel .osku-diapositiva__img img {
		transition: none;
		transform: none;
	}
}

/* ---------- «De la lámina al despacho»: video de fondo ----------
   El video, la imagen fija y el velo son ajustes de la fila (Estilo → Fondo y Superposición).
   Lo que Kadence no trae como ajuste:
   - el encuadre: el video se ajusta a la banda desde abajo, donde se ven las máquinas y las cajas
     (Kadence lo centra y corta la mitad de abajo);
   - «reducir movimiento»: con esa preferencia el video no se muestra y queda el fondo oscuro con
     el velo, como en la maqueta. */
.osku-proceso .kb-blocks-bg-video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
	object-fit: cover;
	object-position: center bottom;
}

@media (prefers-reduced-motion: reduce) {
	.osku-proceso .kb-blocks-bg-video-container {
		display: none;
	}
}

/* Igual que la maqueta (5-nov-2026, Cris: «esta sección no quedó bien»):
   - Con el fondo de video, Kadence no pone ni el color ni la imagen fija en el computador. Si el video
     tarda, falla o hay «reducir movimiento», quedaba el velo gris sobre el fondo claro de la página.
     Debajo del video va siempre el color tinta y la imagen fija (en el teléfono Kadence ya la pone).
   - En el teléfono, el texto va con 40 px a cada lado.
   Rediseño del 6-nov-2026 (Cris: «el título está muy al centro y deberíamos trabajar en rediseñar esa
   parte»): el texto ya no va centrado en la banda. Se alinea al borde izquierdo de la grilla, como el
   resto de la portada, sobre el lado oscuro del velo. Abajo van los tres pasos de la planta, numerados,
   y un enlace a «Cómo fabricamos» en Empresa. Ver el bloque «Pasos de la planta» más abajo. */
.osku-proceso {
	background-color: #121315;
}

@media (min-width: 768px) {
	.osku-proceso {
		background-image: url("/wp-content/uploads/2026/10/planta-oskupack-proceso-poster.webp");
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
}

.osku-proceso > .kt-row-column-wrap > .wp-block-kadence-column {
	width: 100%;
}

/* Kadence centra con margen automático todo bloque que tiene ancho máximo: el título y la bajada
   quedaban al medio de la banda. */
.osku-proceso .wp-block-kadence-advancedheading {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Pasos de la planta (6-nov-2026). En el computador, un segundo velo desde abajo para que los
   pasos se lean también sobre la parte clara del video. */
@media (min-width: 768px) {
	.kb-row-layout-wrap.osku-proceso > .kt-row-layout-overlay {
		background:
			linear-gradient(0deg, rgba(18, 19, 21, 0.92) 0%, rgba(18, 19, 21, 0.78) 40%, rgba(18, 19, 21, 0) 72%),
			linear-gradient(90deg, #121315 0%, rgba(18, 19, 21, 0.94) 34%, rgba(18, 19, 21, 0.5) 60%, rgba(18, 19, 21, 0.1) 82%);
	}
}

.osku-proceso .osku-proceso__pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 64px 0 0;
}

.osku-proceso .osku-proceso__paso {
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 1.55;
}

.osku-proceso .osku-proceso__num {
	display: block;
	margin-bottom: 10px;
	color: #3fb34c;
	font-family: var(--osku-titulos, "Poppins", sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.osku-proceso .osku-proceso__paso strong {
	display: block;
	margin-bottom: 6px;
	color: #fff;
	font-family: var(--osku-titulos, "Poppins", sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.osku-proceso .osku-proceso__enlace {
	margin: 32px 0 0;
	font-size: 15px;
}

.osku-proceso .osku-proceso__enlace a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--osku-transicion, 0.2s ease);
}

.osku-proceso .osku-proceso__enlace a:hover,
.osku-proceso .osku-proceso__enlace a:focus-visible {
	text-decoration-color: #3fb34c;
}

@media (max-width: 767px) {
	.osku-proceso .osku-proceso__pasos {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-top: 40px;
	}

	.osku-proceso .osku-proceso__paso strong {
		font-size: 17px;
	}
}

/* Doble clase: el CSS de la fila que escribe Kadence se carga después y con una sola clase ganaba. */
@media (max-width: 767px) {
	.kb-row-layout-wrap.osku-proceso > .kt-row-column-wrap {
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* Fotos con esquinas redondeadas: Kadence les pone borde sólido y, sin ancho elegido, sale uno gris de
   3 px que la maqueta no tiene (foto de «Nuestra empresa»). Si un bloque elige su borde, se respeta. */
.wp-block-image.has-custom-border img:not([style*="border-width"]):not([style*="border:"]) {
	border-style: none;
}

/* Tarjetas de las cuatro líneas: el título va a 26 px de la foto y en el teléfono no baja de 21 px,
   como en la maqueta (Kadence lo dejaba a 20 px y en 18 px en el teléfono). */
.osku-tarjeta--foto .osku-tarjeta__titulo.wp-block-kadence-advancedheading {
	margin-top: 26px !important;
}

@media (max-width: 767px) {
	.osku-tarjeta--foto .osku-tarjeta__titulo.wp-block-kadence-advancedheading {
		font-size: 21px !important;
		line-height: 1.25 !important;
	}
}

/* Sello BRC de la tarjeta de contacto de la portada: 78 px, como en la maqueta (el bloque traía 44 px). */
.osku-contacto__sello img {
	width: 78px !important;
	max-width: none;
	height: auto;
}

/* ---------- Páginas interiores igual que la maqueta (6-nov-2026) ----------
   Informe: clientes/oskupack/diseno/2026-11-05-comparacion-paginas-maqueta.md. Cada regla lleva el
   número de la diferencia. Las que compiten con el CSS que escribe Kadence por bloque (se carga
   después) llevan una clase de más. */

/* 2 · Empresa, «De la lámina al pallet»: cada paso con 28 px arriba y 26 abajo, 18 px entre pasos. */
.kt-row-column-wrap:has(> .wp-block-kadence-column.osku-paso) {
	column-gap: 18px;
	row-gap: 18px;
}

.wp-block-kadence-column.osku-paso > .kt-inside-inner-col {
	padding-top: 28px;
	padding-bottom: 26px;
}

.osku-paso h3 {
	letter-spacing: -0.01em;
}

/* 3 · Pie: columnas con el ancho de la maqueta y títulos de columna en blanco al 55 %. */
@media (min-width: 1024px) {
	#colophon .site-footer-row.site-middle-footer-inner-wrap {
		grid-template-columns: 499fr 343fr 312fr 406fr;
	}
}

@media (max-width: 767px) {
	#colophon .site-footer-row.site-middle-footer-inner-wrap {
		row-gap: 36px;
	}
}

#colophon .osku-pie__titulo.wp-block-kadence-advancedheading {
	opacity: 0.55;
	letter-spacing: normal;
}

/* 4 · Rótulo sobre el título en las cabeceras oscuras: blanco al 78 %, no verde. */
.osku-cat2 .c2-cab .c2-kicker,
.osku-cotizacion .osku-antetitulo-claro {
	color: rgba(255, 255, 255, 0.78);
}

/* 17 · Contacto: 24 px sobre el rótulo y 14 px bajo el título. */
.osku-cotizacion .osku-antetitulo-claro.wp-block-kadence-advancedheading {
	margin-top: 24px !important;
}

.osku-cotizacion .osku-cotizacion__titulo.wp-block-kadence-advancedheading {
	margin-bottom: 14px !important;
}

/* 5 · Ficha: tabla con esquinas de 12 px, línea entre filas, etiqueta en tinta y valor en gris. */
.osku-ficha .wp-block-table table {
	border: 1px solid #e8e8e4;
	border-radius: 12px;
	overflow: hidden;
}

/* El CSS del plugin se carga después y pone borde 0 y color tinta a toda celda: por eso el !important. */
.osku-ficha .wp-block-table td {
	border-bottom: 1px solid #e8e8e4 !important;
	color: var(--wp--preset--color--gris, #55595b) !important;
}

.osku-ficha .wp-block-table tr:last-child td {
	border-bottom: 0 !important;
}

@media (max-width: 767px) {
	.osku-ficha .wp-block-table tr td:first-child {
		width: 52%;
	}
}

.osku-ficha .wp-block-table td:first-child {
	width: 48%;
	color: var(--wp--preset--color--tinta, #121315) !important;
}

/* 6 · Blog: foto 16:10 con esquinas de 12 px, fecha en minúscula a 13 px y los márgenes de la maqueta. */
.osku-blog__lista .post-thumbnail.kadence-thumbnail-ratio-2-3 {
	padding-bottom: 62.5%;
	border-radius: 12px;
	overflow: hidden;
}

.osku-blog__lista .entry-meta {
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
}

.osku-blog__lista .loop-entry .entry-summary p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.osku-blog__lista .loop-entry .entry-title {
	margin-bottom: 8px;
	font-size: 19px;
}

.osku-blog h1.wp-block-kadence-advancedheading {
	margin-top: 24px !important;
	margin-bottom: 0 !important;
}

@media (max-width: 767px) {
	.osku-blog h1.wp-block-kadence-advancedheading {
		margin-top: 40px !important;
	}
}

.osku-blog .osku-blog__bajada {
	margin-bottom: 8px !important;
}

/* 7 · Artículo: sin el rótulo «Blog» sobre el título (la miga ya lleva al blog) y llamado final en
   una caja papel de 16 px de radio, con el botón de la maqueta. */
.single-post .osku-articulo__antetitulo {
	display: none;
}

.single-post .entry-header .entry-title {
	margin-top: 11px;
}

.kb-row-layout-wrap.osku-llamado-articulo {
	border-radius: 16px;
	overflow: hidden;
}

.osku-llamado-articulo h2.wp-block-kadence-advancedheading {
	margin-bottom: 0 !important;
}

.osku-llamado-articulo h2 + p {
	margin-top: 24px !important;
}

.osku-llamado-articulo .kb-buttons-wrap {
	margin-top: 24px;
	padding: 15px 0;
}

.osku-llamado-articulo .kb-button.kt-button {
	padding: 13px 26px;
	border-radius: 10px;
	font-size: 16px;
}

/* 8 · Encabezado: «Cotizar» sin sombra; en el teléfono, 36 px a los lados y botón de menú de 44 px. */
#masthead .header-button,
#mobile-header .mobile-header-button {
	box-shadow: none;
}

@media (max-width: 767px) {
	#mobile-header .site-header-row-container-inner > .site-container {
		padding-left: 36px;
		padding-right: 36px;
	}

	#mobile-header .menu-toggle-open.drawer-toggle {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		border-radius: 0;
		margin-right: 14px;
	}
}

/* 9 · Empresa: el botón del certificado BRCGS con el mismo formato que los demás botones. */
.kb-btns86_b0u {
	margin-top: 8px;
}

.kb-btns86_b0u .kb-button.kb-btn86_s0v {
	padding: 15px 22px 15px 24px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1;
}

/* 10 · Logos de clientes en el teléfono: la grilla llega hasta el borde, como en la maqueta. */
@media (max-width: 767px) {
	body:not(.home) .wp-block-gallery.is-style-logos-clientes:not(.osku-logos-compactos) {
		margin-left: -24px;
		margin-right: -24px;
	}
}

/* 11 · Interiores sin la trama de color de la portada: fondo tinta liso. */
body:not(.home) .osku-textura-tinta {
	background-image: none !important;
}

.kb-row-layout-wrap.osku-cotizacion {
	background-color: #16181a;
}

/* 12 · Catálogo: el selector «Ordenar» con su flecha y el alto de la maqueta. */
.osku-cat2 .c2-orden select {
	appearance: auto;
	-webkit-appearance: menulist;
	height: auto;
}

/* 13 · Contacto: el mapa con esquinas de 12 px, línea fina y 400 px de alto en el computador;
   logos de la franja con 36 px entre columnas. */
.osku-mapa {
	border-color: #e8e8e4;
	border-radius: 12px;
}

@media (min-width: 768px) {
	.osku-mapa {
		aspect-ratio: auto;
		height: 400px;
	}

	.wp-block-gallery.has-nested-images.is-style-logos-clientes.osku-logos-compactos {
		column-gap: 36px !important;
	}
}

/* 15 · Catálogo: títulos de familia con interlineado 1,15. */
.osku-cat2 .c2-grupo-titulo {
	line-height: 1.15;
}

/* 17 · Empresa: el rótulo «Planta y oficina comercial» en una sola línea de 14 px. */
.osku-direccion .osku-antetitulo-claro.wp-block-kadence-advancedheading {
	line-height: 1 !important;
}

/* 17 · Empresa: en el llamado final el título usa el ancho libre y el botón queda al borde derecho. */
@media (min-width: 1024px) {
	.kb-row-layout-id86_f1i > .kt-row-column-wrap.kt-has-2-columns {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 30px;
	}
}

/* 1 · Texto corrido a 16 px, como la maqueta (Kadence lo deja en 17 px en Personalizar → Tipografía).
   «html body» gana a la regla de Kadence sin depender del orden de carga. Los campos quedan en 16 px:
   con eso el iPhone no acerca la pantalla al tocarlos. Cris, 6-nov: «Continúa». */
html body,
html body :is(input, select, optgroup, textarea) {
	font-size: 16px;
}