/*
Theme Name:   Oskupack (Kadence)
Theme URI:    https://oskupack.cl
Description:  Tema hijo de Kadence para Oskupack. El diseño se arma y se edita en el editor con los bloques de Kadence y los de WordPress; este tema aporta las fuentes de la marca (servidas desde el propio sitio), un par de estilos listos para elegir con un clic (por ejemplo «Logos de clientes» en la Galería), el carrusel de la portada y los detalles finos que Kadence no trae como ajuste.
Author:       OpenClaw
Template:     kadence
Version:      0.3.5
Requires PHP: 7.4
Text Domain:  oskupack-kadence
*/

/* Esta hoja se carga en el sitio Y en el editor, para que lo que se edita se vea como queda.
   Lo que solo tiene sentido en el sitio (el carrusel en movimiento, textos ocultos para lectores
   de pantalla) va en assets/css/sitio.css. Lo que solo ayuda a editar, en assets/css/editor.css.

   Regla de esta hoja: lo que se puede ajustar desde la barra lateral (colores, espacios, bordes,
   sombras) NO se fija aquí, para que el ajuste funcione. Aquí va solo lo que Kadence no ofrece. */

/* ---------- Fuentes de la marca, servidas desde el sitio (sin Google Fonts) ---------- */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/poppins-600.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/poppins-700.woff2") format("woff2");
}

@font-face {
	font-family: "Mulish";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/mulish-var.woff2") format("woff2");
}

:root {
	--osku-sombra-1: 0 1px 3px rgba(18, 19, 21, 0.06), 0 4px 14px rgba(18, 19, 21, 0.05);
	--osku-sombra-2: 0 10px 26px rgba(18, 19, 21, 0.1);
	--osku-transicion: 0.25s ease;
	--osku-titulos: "Poppins", system-ui, sans-serif;
}

/* ---------- Texturas de fondo ----------
   Se agregan solas según el color de fondo de la sección (functions.php): una sección con fondo
   «Tinta» o «Grafito» lleva el halo verde. Es un degradado CSS, sin imagen extra que descargar.
   Las secciones «Papel» van lisas (revisión «sin IA» del 15-oct). */

.osku-textura-tinta {
	background-image:
		radial-gradient(ellipse 70% 55% at 22% -8%, rgba(46, 158, 58, 0.16) 0%, transparent 62%),
		radial-gradient(ellipse 60% 50% at 88% 105%, rgba(201, 46, 36, 0.1) 0%, transparent 60%);
}

/* ---------- Encabezados de sección ---------- */

/* Títulos con las líneas equilibradas, solo donde la maqueta lo hace: el hero, «Lo que respalda
   cada envase», el proceso, los títulos de Empresa y las preguntas frecuentes. El resto de los
   títulos parte las líneas como cualquier texto. */
.osku-equilibrado,
.osku-pregunta .kt-blocks-info-box-title {
	text-wrap: balance;
}

/* La bajada y los títulos con ancho máximo se centran en su sección. */
.osku-bajada,
.osku-centrado {
	margin-left: auto;
	margin-right: auto;
}

.osku-bajada--clara {
	color: rgba(255, 255, 255, 0.74);
}

/* Dentro de una columna, el último bloque no deja espacio sobrante abajo. */
.single-content .kt-inside-inner-col > :last-child {
	margin-bottom: 0;
}

/* Botones de sección: que el grupo no agregue margen propio del tema. */
.single-content .kt-inside-inner-col > .wp-block-kadence-advancedbtn {
	margin-bottom: 0;
}

/* ---------- Tarjetas (columnas con estilo de tarjeta) ----------
   El fondo, el borde, las esquinas y la sombra son ajustes de la columna (barra lateral →
   Estilo). Aquí va lo que no es ajuste: que toda la tarjeta sea clicable y que el enlace
   quede siempre abajo. Sin salto ni sombra al pasar el mouse (revisión «sin IA» del 15-oct). */

.kb-row-layout-wrap.osku-tarjetas > .kt-row-column-wrap {
	align-items: stretch;
}

.kb-row-layout-wrap .osku-tarjeta > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	overflow: hidden;
}

/* Toda la tarjeta lleva a donde apunta el título. */
.osku-tarjeta__titulo a {
	color: inherit;
	text-decoration: none;
}

.osku-tarjeta__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.osku-tarjeta__titulo a:focus-visible {
	outline: none;
}

.osku-tarjeta:has(.osku-tarjeta__titulo a:focus-visible) > .kt-inside-inner-col {
	outline: 2px solid var(--global-palette1);
	outline-offset: 3px;
}

.single-content .kt-inside-inner-col > p.osku-tarjeta__enlace {
	margin-top: auto;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.7;
}

.osku-tarjeta__enlace a {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 9px 0;
	color: var(--global-palette13);
	font-weight: 700;
	text-decoration: none;
}

.osku-tarjeta__enlace a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tarjeta con foto: la foto va a sangre arriba; los textos traen su margen lateral. */
.osku-tarjeta__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.single-content .osku-tarjeta--foto > .kt-inside-inner-col > p.osku-tarjeta__enlace {
	margin: auto 20px 0;
	padding: 12px 0 13px;
}

.osku-tarjeta__cantidad {
	color: #55595b;
}

.single-content .osku-tarjeta--icono > .kt-inside-inner-col > p.osku-tarjeta__enlace {
	padding-top: 24px;
}

.osku-tarjeta__icono img {
	display: block;
}

/* ---------- Envases por tipo (portada): tarjetas con ícono ----------
   Tarjeta, círculo, textos y enlace son ajustes del Info Box. Aquí solo el tono del ícono, que
   viene en gris claro y en la maqueta se oscurece a la mitad. */

.osku-categoria .kadence-info-box-image-intrisic img,
.osku-categoria .kt-info-box-image {
	filter: brightness(0.5);
}

/* ---------- Cifras ---------- */

.osku-cifra__etiqueta strong {
	color: var(--global-palette3);
	font-weight: 600;
}

/* ---------- Tres claves (Info Box con ícono) ---------- */

.osku-clave .kt-blocks-info-box-media {
	display: inline-flex;
}

/* ---------- Testimonios ----------
   Kadence arma cada reseña como li.kt-testimonial-grid-item > div.kt-testimonial-item-wrap (la
   tarjeta). Las tarjetas de una misma fila quedan del mismo alto. */

.osku-testimonios .kt-testimonial-grid-item {
	display: flex;
}

.osku-testimonios .kt-testimonial-item-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.osku-testimonios .kt-testimonial-rating-wrap {
	display: flex;
	justify-content: center;
	gap: 3px;
	line-height: 1;
}

.osku-testimonios .kt-testimonial-text-wrap {
	flex: 1;
}

.osku-testimonios .kt-testimonial-content {
	text-align: left;
}

.osku-testimonios .kt-testimonial-meta-wrap {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--global-palette7);
	display: inline-flex;
	flex-direction: column;
	align-self: center;
}

.osku-testimonios .kt-testimonial-name,
.osku-testimonios .kt-testimonial-occupation {
	line-height: 1.5;
}

/* La primera reseña se destaca: fondo papel siempre y, en computador, dos columnas y cita más
   grande. */
.osku-testimonios .kt-testimonial-grid-wrap > :first-child > .kt-testimonial-item-wrap {
	background: var(--global-palette8);
	border-color: #dcdcd6;
}

@media (min-width: 992px) {
	.osku-testimonios .kt-testimonial-grid-wrap > :first-child {
		grid-column: span 2;
	}

	.osku-testimonios .kt-testimonial-grid-wrap > :first-child .kt-testimonial-content {
		font-size: 19px;
	}
}

/* ---------- Logos de clientes (Galería · estilo «Logos de clientes») ----------
   Se elige en la barra lateral de la Galería (Estilos → Logos de clientes). Cada logo queda en
   una tarjeta blanca del mismo tamaño, en gris, y toma color al pasar el mouse. Para agregar un
   cliente basta con arrastrar su logo sobre la galería y escribir el nombre debajo. */

.wp-block-gallery.has-nested-images.is-style-logos-clientes {
	--logos-columnas: 4;
	display: grid !important;
	grid-template-columns: repeat(var(--logos-columnas), 216px);
	justify-content: center;
	gap: 8px 36px !important;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes.columns-5 {
	--logos-columnas: 5;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.wp-block-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 216px !important;
	height: 112px;
	margin: 0 !important;
	padding: 0 12px;
	box-sizing: border-box;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.wp-block-image img {
	width: auto !important;
	height: auto !important;
	max-width: 165px !important;
	max-height: 52px;
	object-fit: contain !important;
	flex: none !important;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter var(--osku-transicion), opacity var(--osku-transicion), transform var(--osku-transicion);
}

/* Logos redondos o verticales (se detecta solo por la proporción de la imagen). */
.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.es-logo-vertical img {
	max-height: 78px;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.wp-block-image:hover img {
	filter: none;
	opacity: 1;
}

@media (max-width: 781px) {
	.wp-block-gallery.has-nested-images.is-style-logos-clientes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px 36px !important;
	}

	.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.wp-block-image {
		width: auto !important;
		height: 84px;
		padding: 0 10px;
	}

	.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.wp-block-image img {
		max-width: 100% !important;
		max-height: 38px;
	}

	.wp-block-gallery.has-nested-images.is-style-logos-clientes > figure.es-logo-vertical img {
		max-height: 58px;
	}
}

.osku-nota-logos {
	color: var(--global-palette4);
}

/* ---------- Contacto ---------- */

.kb-row-layout-wrap .osku-contacto__tarjeta {
	align-self: start;
}

.osku-contacto__sello {
	gap: 10px;
}

.osku-contacto__sello > figure {
	flex: none;
}

/* ---------- Formulario (Contact Form 7) ---------- */

.wpcf7 {
	margin-top: 24px;
}

.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
	align-items: start;
}

.wpcf7-form > p {
	margin: 0;
}

.wpcf7-form > p:has(textarea),
.wpcf7-form > p:has(input[type="submit"]),
.wpcf7-form > .wpcf7-response-output,
.wpcf7-form > p:has(input[type="hidden"]) {
	grid-column: 1 / -1;
}

.wpcf7 label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 14px;
	color: var(--global-palette3);
}

.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea,
.wpcf7-form-control {
	box-sizing: border-box;
	max-width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15.5px;
	color: var(--global-palette3);
	background: #fff;
	border: 1.5px solid #e8e8e4;
	border-radius: 10px;
	transition: border-color var(--osku-transicion), box-shadow var(--osku-transicion);
}

/* Kadence quita la flecha propia del navegador y dibuja la suya como fondo: el fondo blanco de
   arriba la borraba y el desplegable parecía un campo de texto. Aquí va la flecha de nuevo. */
.wpcf7 select {
	padding-right: 42px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121315' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
	-webkit-appearance: none;
	appearance: none;
	font-weight: 600;
	cursor: pointer;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--global-palette11);
	box-shadow: 0 0 0 3px rgba(46, 158, 58, 0.15);
}

.wpcf7 textarea {
	min-height: 110px;
	height: 110px;
	resize: vertical;
}

.wpcf7 input[type="submit"] {
	justify-self: start;
	margin-top: 4px;
	padding: 13px 30px;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 16px;
	color: #fff;
	background: var(--global-palette1);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: transform var(--osku-transicion), background-color var(--osku-transicion);
}

.wpcf7 input[type="submit"]:hover {
	background: var(--global-palette2);
	transform: translateY(-2px);
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 13px;
	margin-top: 4px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--global-palette11) !important;
	background: #eef7ef;
	color: #14682a;
}

@media (max-width: 600px) {
	.wpcf7-form {
		grid-template-columns: 1fr;
	}
}

/* ---------- Portada · cada diapositiva ----------
   Se ve igual en el editor (una debajo de la otra) y en el sitio (una a la vez, en carrusel:
   assets/css/sitio.css). Texto a la izquierda sobre fondo grafito, foto a sangre a la derecha
   con borde en diagonal. */

.osku-carrusel .osku-diapositiva,
.osku-diapositiva {
	background: #0f1113;
	color: #fff;
}

.osku-diapositiva__texto > .kt-inside-inner-col {
	position: relative;
	justify-content: center;
	min-height: 600px;
	padding: 72px 48px 72px max(48px, calc((100vw - 1220px) / 2 + 24px));
}

.osku-carrusel .osku-diapositiva__texto .kt-inside-inner-col > * {
	max-width: 560px;
}

.osku-carrusel .osku-diapositiva__linea {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.7;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}



.osku-carrusel .osku-diapositiva__titulo {
	margin: 0 0 20px;
	font-family: var(--osku-titulos);
	font-weight: 700;
	font-size: clamp(34px, 3.1vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: #fff;
}

.osku-carrusel .osku-diapositiva__bajada {
	margin: 0 0 32px;
	max-width: 500px;
	font-size: clamp(16px, 0.5vw + 14px, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.osku-carrusel .osku-diapositiva__botones {
	gap: 14px 28px;
}




/* Foto a sangre con borde en diagonal y un velo para que el texto lea limpio. */
.osku-diapositiva__foto {
	position: relative;
	min-height: 600px;
	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
	background: #16191c;
}

.osku-diapositiva__foto > .kt-inside-inner-col {
	position: absolute;
	inset: 0;
	padding: 0;
}

.osku-diapositiva__img {
	position: absolute;
	inset: 0;
}

.osku-diapositiva__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.osku-diapositiva__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(15, 17, 19, 0.55) 0%, rgba(15, 17, 19, 0) 34%),
		linear-gradient(0deg, rgba(15, 17, 19, 0.45) 0%, rgba(15, 17, 19, 0) 38%);
}

/* Botón principal de la portada: más alto, con la flecha que avanza. */
.osku-carrusel .kb-button.osku-boton-portada {
	gap: 10px;
	padding: 17px 24px 17px 26px;
	border-radius: 8px;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.7;
	letter-spacing: 0.01em;
	transition: transform var(--osku-transicion), background-color var(--osku-transicion);
}

.osku-carrusel .kb-button.osku-boton-portada:hover,
.osku-carrusel .kb-button.osku-boton-portada:focus-visible {
	transform: translateY(-2px);
}

.osku-carrusel .kb-button.osku-boton-portada .kb-svg-icon-wrap {
	font-size: 18px;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.osku-carrusel .kb-button.osku-boton-portada:hover .kb-svg-icon-wrap {
	transform: translateX(5px);
}

/* Botón secundario de la portada: enlace con punto rojo y subrayado que crece. */
.osku-carrusel .kb-button.osku-boton-enlace,
.osku-carrusel .kb-button.osku-boton-enlace:hover {
	position: relative;
	gap: 10px;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.7;
	letter-spacing: 0.01em;
}

/* El punto rojo va en el texto: Kadence ya usa el ::before del botón para su efecto de fondo. */
.osku-carrusel .kb-button.osku-boton-enlace .kt-btn-inner-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.osku-carrusel .kb-button.osku-boton-enlace .kt-btn-inner-text::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c92e24;
	transition: transform var(--osku-transicion);
}

.osku-carrusel .kb-button.osku-boton-enlace::before {
	display: none;
}

.osku-carrusel .kb-button.osku-boton-enlace::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.25));
	transform: scaleX(0.35);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.osku-carrusel .kb-button.osku-boton-enlace:hover::after,
.osku-carrusel .kb-button.osku-boton-enlace:focus-visible::after {
	transform: scaleX(1);
}

.osku-carrusel .kb-button.osku-boton-enlace:hover .kt-btn-inner-text::before {
	transform: scale(1.25);
}

/* Sello BRC sobre la foto. */
.osku-carrusel__sello {
	gap: 12px !important;
	align-items: center;
	width: max-content;
	padding: 10px 16px 10px 10px;
	background: rgba(255, 255, 255, 0.94);
	color: #0f1113;
	border-radius: 10px;
	font-size: 12.5px;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.osku-carrusel__sello img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.osku-carrusel__sello strong {
	display: inline-block;
	margin-bottom: 2px;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 13px;
	color: #1c7526;
}

@media (max-width: 767px) {
	.osku-diapositiva__texto > .kt-inside-inner-col {
		min-height: 0;
		padding: 30px 22px 34px;
	}

	.osku-diapositiva__foto {
		min-height: 0;
		aspect-ratio: 16 / 10;
		clip-path: none;
	}

	.osku-diapositiva__foto::after {
		background: linear-gradient(0deg, rgba(15, 17, 19, 0.85) 0%, rgba(15, 17, 19, 0) 45%);
	}

	.osku-carrusel .osku-diapositiva__titulo {
		margin-bottom: 14px;
		font-size: clamp(28px, 7.6vw, 36px);
	}

	.osku-carrusel .osku-diapositiva__bajada {
		margin-bottom: 24px;
		font-size: 16px;
	}

	.osku-carrusel .osku-diapositiva__botones {
		gap: 14px 22px;
	}

	.osku-carrusel .kb-button.osku-boton-portada {
		width: 100%;
		justify-content: center;
		padding: 16px 20px;
	}

	.osku-carrusel__sello {
		padding: 7px 12px 7px 7px;
		font-size: 11.5px;
	}

	.osku-carrusel__sello img {
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-row-layout-wrap .osku-tarjeta > .kt-inside-inner-col,
	.wp-block-gallery.is-style-logos-clientes > figure.wp-block-image,
	.wp-block-gallery.is-style-logos-clientes > figure.wp-block-image img,
	.osku-carrusel .kb-button {
		transition: none;
	}
}

/* ---------- Cabecera ----------
   Logo, menú y botón se ubican y ajustan en Apariencia → Personalizar → Cabecera. Aquí solo la
   sombra suave bajo la franja, que Kadence no trae como ajuste. */

#masthead .site-main-header-wrap .site-header-row-container-inner {
	box-shadow: 0 4px 18px rgba(18, 19, 21, 0.04);
}

/* Cabecera fija encogida (Personalizar → Cabecera → Cabecera fija → Encoger, 67 px): en computador
   el logo baja a 132 px, como en la maqueta. */
#masthead .site-branding a.brand img {
	transition: max-width var(--osku-transicion);
}

@media (min-width: 1025px) {
	#masthead .kadence-sticky-header.item-is-stuck .site-branding a.brand img {
		max-width: 132px;
	}
}

/* ---------- Pie de página ----------
   Columnas y contenido: Apariencia → Personalizar → Pie de página, y Apariencia → Widgets.
   El pie es más ancho que el contenido (1680 px), igual que en la maqueta. */

/* Fondo liso, sin halo (revisión «sin IA» del 15-oct). */
#colophon {
	color: rgba(255, 255, 255, 0.66);
}

#colophon .site-container {
	max-width: 1728px;
}

#colophon .widget,
#colophon .footer-html,
#colophon p {
	font-size: 15px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.66);
}

#colophon a {
	color: rgba(255, 255, 255, 0.66);
	text-decoration: none;
	transition: color var(--osku-transicion);
}

#colophon a:hover,
#colophon a:focus-visible {
	color: #fff;
}

/* Títulos de columna en minúscula y a 17 px (revisión «sin IA» del 15-oct: sin rótulos en mayúscula). */
#colophon .osku-pie__titulo {
	font-family: var(--osku-titulos);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
	color: #fff;
}

#colophon .osku-pie__contacto a {
	color: #fff;
	font-weight: 600;
}

#colophon .osku-pie__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1;
}

#colophon .osku-pie__sellos span {
	padding: 6px 13px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.8);
}

#colophon .site-bottom-footer-wrap .footer-html,
#colophon .site-bottom-footer-wrap .widget,
#colophon .site-bottom-footer-wrap p {
	line-height: 1.6;
	color: var(--global-palette6);
}

@media (min-width: 768px) {
	#colophon .site-footer-bottom-section-2 {
		justify-content: flex-end;
		text-align: right;
	}
}

#colophon .site-bottom-footer-inner-wrap {
	align-items: center;
}

#colophon .site-bottom-footer-wrap .widget {
	margin: 0;
}

/* En computador y tablet, como la maqueta: el © sin margen propio (el espacio lo da la franja de
   abajo, en Personalizar), el logo sin espacio de línea debajo y 18 px entre el texto y los sellos. */
@media (min-width: 768px) {
	#colophon .site-bottom-footer-wrap .footer-html {
		margin: 0;
	}

	#colophon .site-footer-middle-section-1 .wp-block-image img {
		display: block;
	}

	#colophon .site-footer-middle-section-1 .widget:has(+ .widget .osku-pie__sellos) {
		margin-bottom: 18px;
	}
}

@media (max-width: 767px) {
	#colophon .site-container {
		padding-left: 40px;
		padding-right: 40px;
	}

	/* En el teléfono, cada enlace del pie es fácil de tocar con el dedo (44 px de alto). */
	#colophon .site-middle-footer-wrap p a {
		display: inline-block;
		padding: 8px 0;
	}
}

/* ================================================================ Empresa (22-sep-2026)
   Medidas de las reglas .e2-* del tema anterior (Empresa v2 de la maqueta). */

/* Antetítulos: con línea roja delante (secciones claras) o verdes (fondo oscuro). */
.kb-row-layout-wrap .osku-antetitulo-linea {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.osku-antetitulo-linea::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.osku-antetitulo-claro {
	color: #6fd37a;
}

/* ---------- Cabecera: panel oscuro con los datos + foto a sangre ---------- */

.osku-cabecera__texto > .kt-inside-inner-col {
	justify-content: center;
	padding: 44px 48px 56px max(48px, calc((100vw - 1220px) / 2 + 24px));
	color: #fff;
}

.osku-cabecera .osku-migas {
	margin: 0 0 30px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

/* El enlace conserva su área para el dedo (8 px arriba y abajo) sin sumar alto a la cabecera. */
.osku-cabecera .osku-migas a {
	margin-block: -8px;
	color: rgba(255, 255, 255, 0.85);
}

.osku-cabecera .osku-migas span[aria-current],
.osku-cabecera .osku-migas li + li::before {
	color: rgba(255, 255, 255, 0.6);
}

.kb-row-layout-wrap .osku-cabecera__titulo {
	margin: 0 0 16px;
	font-family: var(--osku-titulos);
	font-weight: 700;
	font-size: clamp(32px, 2.9vw, 50px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: #fff;
}

.osku-cabecera__bajada {
	max-width: 560px;
	color: rgba(255, 255, 255, 0.78);
}

.osku-cabecera__datos {
	max-width: 620px;
	gap: 12px 24px !important;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Rótulos de los datos en minúscula y a 14 px (revisión «sin IA» del 15-oct). */
.osku-dato__k {
	margin: 0 0 4px !important;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.6);
}

.osku-dato__v {
	margin: 0 !important;
	font-size: 14.5px;
	line-height: 1.4;
	color: #fff;
}

.osku-cabecera__foto {
	position: relative;
	min-height: 560px;
	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
	background: #16191c;
}

.osku-cabecera__foto > .kt-inside-inner-col {
	position: absolute;
	inset: 0;
	padding: 0;
}

.osku-cabecera__img {
	position: absolute;
	inset: 0;
	margin: 0 !important;
}

.osku-cabecera__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.osku-cabecera__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(15, 17, 19, 0.5) 0%, rgba(15, 17, 19, 0) 35%),
		linear-gradient(0deg, rgba(15, 17, 19, 0.45) 0%, rgba(15, 17, 19, 0) 40%);
}

.osku-cabecera .osku-cabecera__sello {
	position: absolute;
	right: 32px;
	bottom: 28px;
	z-index: 2;
	margin: 0 !important;
	white-space: nowrap;
}

.osku-cabecera .osku-cabecera__sello img {
	width: 52px;
	height: 52px;
}

/* ---------- Cifras en banda ---------- */

.osku-cifras-banda {
	border-bottom: 1px solid #e3e6e4;
}

.osku-cifras-banda__celda {
	border-right: 1px solid #e3e6e4;
}

.osku-cifras-banda__celda:last-child {
	border-right: 0;
}

.osku-cifras-banda__texto {
	max-width: 240px;
	color: var(--global-palette4);
}

/* ---------- Foto con leyenda (sin sombra desde la revisión «sin IA» del 15-oct) ---------- */

.osku-foto-sombra img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.osku-foto-sombra figcaption {
	margin: 10px 0 0;
	font-size: 13px;
	text-align: left;
	color: var(--global-palette4);
}


/* ---------- Certificados ---------- */

.osku-cert__cab {
	gap: 18px !important;
}

.osku-cert__cab > figure {
	flex: none;
}

.osku-cert__datos {
	gap: 12px !important;
}

.osku-cert-dato {
	padding: 10px 12px;
	border-radius: 8px;
	background: #f6f6f4;
}

.osku-cert-dato__k {
	margin: 0 0 4px !important;
	font-size: 14px;
	line-height: 1.5;
	color: var(--global-palette4);
}

.osku-cert-dato__v {
	margin: 0 !important;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--global-palette3);
}

.osku-cert-lista .wp-block-kadence-infobox:last-child {
	margin-bottom: 0;
}

/* ---------- Dónde estamos ---------- */

.osku-ubicacion__cta {
	gap: 18px 22px !important;
}

.osku-google a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--global-palette3);
	font-size: 14.5px;
	text-decoration: none;
}

.osku-google a::before {
	content: "★";
	color: #f5a623;
	font-size: 17px;
	line-height: 1;
}

.osku-google strong {
	font-family: var(--osku-titulos);
	font-weight: 700;
}

.osku-direccion__linea {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.osku-direccion__linea strong {
	font-family: var(--osku-titulos);
	font-size: 18px;
	color: #fff;
}

.osku-direccion a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------- Botones de contorno (borde verde) ----------
   Kadence no tiene un ajuste de fondo para el botón de contorno: al pasar el mouse solo cambiaba
   el color del texto (a blanco, en Personalizar → Botones), y sobre un fondo claro el texto
   desaparecía. Aquí va el relleno que falta, igual al de la maqueta: fondo blanco.
   `:not(.osku-boton-enlace)`: ese botón reutiliza el estilo de contorno pero se rediseñó como
   enlace transparente con punto rojo (portada, fondo oscuro) — sin este freno, esta regla y la
   suya empatan en especificidad y, por venir después en la hoja, esta ganaba el fondo y el botón
   quedaba en blanco sobre blanco. */

.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline:not(.osku-boton-enlace):hover,
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline:not(.osku-boton-enlace):focus-visible {
	background: var(--global-palette9);
}

/* ---------- Botones con sombra (Empresa, llamado del blog) ----------
   Con `.wp-block-kadence-advancedbtn` delante: en los artículos la hoja de botones de Kadence se
   carga después de esta y, con la misma especificidad, ganaba por orden. */

.wp-block-kadence-advancedbtn .kb-button.osku-boton-sombra {
	gap: 10px;
	padding: 15px 22px 15px 24px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1;
	transition: transform 0.2s, background-color 0.2s;
}

.wp-block-kadence-advancedbtn .kb-button.osku-boton-sombra:hover {
	transform: translateY(-2px);
}

.wp-block-kadence-advancedbtn .kb-button.osku-boton-grande {
	padding: 17px 26px;
	font-size: 16px;
}

/* ---------- Cierre oscuro ---------- */

.osku-cierre__texto {
	max-width: 560px;
	color: rgba(255, 255, 255, 0.75);
}

.osku-cierre__acciones > .kt-inside-inner-col {
	align-items: flex-start;
}

.osku-cierre__enlace a {
	color: #fff;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 767px) {
	.osku-cabecera__texto > .kt-inside-inner-col {
		padding: 26px 22px 34px;
	}

	.osku-cabecera .osku-migas {
		margin-bottom: 16px;
	}

	.osku-cabecera__datos {
		grid-template-columns: 1fr !important;
	}

	.osku-cabecera__foto {
		min-height: 0;
		aspect-ratio: 16 / 10;
		clip-path: none;
	}

	.osku-cabecera .osku-cabecera__sello {
		right: 14px;
		bottom: 12px;
		padding: 7px 12px 7px 7px;
		font-size: 11.5px;
	}

	.osku-cabecera .osku-cabecera__sello img {
		width: 40px;
		height: 40px;
	}

	.osku-cifras-banda__celda:nth-child(2n) {
		border-right: 0;
	}

	.osku-cert__datos {
		grid-template-columns: 1fr 1fr !important;
	}

	.osku-ubicacion__cta {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.osku-ubicacion__cta .wp-block-kadence-advancedbtn,
	.osku-ubicacion__cta .kb-button,
	.osku-cierre__acciones .wp-block-kadence-advancedbtn,
	.osku-cierre__acciones .kb-button {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Página Contacto ----------
   Encabezado oscuro con el formulario en una tarjeta blanca, logos con una reseña y el mapa. El
   fondo, la tarjeta, los espacios y la sombra están en los ajustes de cada bloque; aquí va solo
   lo que Kadence no trae como ajuste. */

.osku-cotizacion {
	color: rgba(255, 255, 255, 0.82);
}

.kb-row-layout-wrap .osku-cotizacion__titulo {
	text-wrap: balance;
}

.osku-cotizacion__beneficios strong {
	color: #fff;
}

/* Sello en una ficha blanca que el logo llena (no flota dentro de ella). */
.wp-block-image.osku-sello-tarjeta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 208px;
	height: 124px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 14px;
}

.wp-block-image.osku-sello-tarjeta img {
	width: auto;
	max-width: 144px;
	max-height: 76px;
	object-fit: contain;
}

.osku-cotizacion__directo {
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.osku-cotizacion__pregunta {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.6);
}

.osku-cotizacion__directo a,
.osku-cotizacion__directo strong {
	color: #fff;
}

.osku-cotizacion__directo a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Con la tarjeta angosta (tablet vertical, teléfono), los campos van en una sola columna. */
.osku-cotizacion__form > .kt-inside-inner-col {
	container-type: inline-size;
}

@container (max-width: 440px) {
	.osku-cotizacion__form .wpcf7-form {
		grid-template-columns: 1fr;
	}
}

/* Logos en versión compacta (Contacto): tarjetas de 160 × 80. Con «Columnas: 3» en la barra
   lateral de la Galería quedan en tres columnas. */
.wp-block-gallery.has-nested-images.is-style-logos-clientes.columns-3 {
	--logos-columnas: 3;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes.osku-logos-compactos {
	grid-template-columns: repeat(var(--logos-columnas), 160px);
	gap: 14px 12px !important;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes.osku-logos-compactos > figure.wp-block-image {
	width: 160px !important;
	height: 80px;
}

.wp-block-gallery.has-nested-images.is-style-logos-clientes.osku-logos-compactos > figure.wp-block-image img {
	max-width: 116px !important;
	max-height: 36px;
}

.osku-cita {
	max-width: 632px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 26px;
	border-top: 1px solid var(--global-palette7);
}

/* Mapa: el recuadro fija la proporción y el mapa (o el botón que lo reemplaza) lo llena. */
.osku-mapa {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--global-palette7);
	border-radius: 14px;
}

.osku-mapa > iframe,
.osku-mapa > .osku-mapa-boton {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	border: 0;
	border-radius: 0;
}

@media (max-width: 767px) {
	.wp-block-gallery.has-nested-images.is-style-logos-clientes.osku-logos-compactos {
		grid-template-columns: repeat(2, 131px);
		gap: 12px 10px !important;
	}

	.wp-block-gallery.has-nested-images.is-style-logos-clientes.osku-logos-compactos > figure.wp-block-image {
		width: 131px !important;
	}

	.osku-mapa {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Blog ----------
   Listado: bloque Entradas de Kadence, en tarjetas sin caja (foto, fecha, título y resumen).
   Artículo: plantilla de entradas de Kadence (Personalizar → Entradas) con el antetítulo y el
   llamado final que agrega functions.php. Medidas del blog del tema anterior. */

.osku-blog__bajada {
	max-width: 60ch;
}

.wp-block-kadence-posts.osku-blog__lista {
	gap: 32px 28px;
}

.osku-blog__lista .loop-entry {
	margin: 0;
	background: none;
	box-shadow: none;
}

.osku-blog__lista .post-thumbnail {
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 12px;
}

.osku-blog__lista .entry-content-wrap {
	padding: 0;
}

/* La fecha va sobre el título, en verde y en mayúsculas. */
.osku-blog__lista .entry-header {
	display: flex;
	flex-direction: column;
	margin: 0 0 8px;
}

.osku-blog__lista .loop-entry .entry-header .entry-meta {
	order: -1;
	margin: 0 0 6px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--global-palette1);
}

.osku-blog__lista .entry-title {
	margin: 0;
	letter-spacing: -0.01em;
}

.osku-blog__lista .entry-title a {
	color: var(--global-palette3);
	text-decoration: none;
	transition: color var(--osku-transicion);
}

.osku-blog__lista .entry-title a:hover,
.osku-blog__lista .entry-title a:focus-visible {
	color: var(--global-palette1);
}

.osku-blog__lista .entry-summary,
.osku-blog__lista .entry-summary p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--global-palette4);
}

.osku-blog__lista .entry-footer:empty {
	display: none;
}

/* Artículo: el antetítulo a 68 px de la cabecera y el título 35 px más abajo, en computador y en
   teléfono, como en la maqueta. */
.single-post .content-area {
	margin-top: 68px;
}

.single-post .entry-header {
	margin-bottom: 28px;
}

.osku-articulo__antetitulo {
	margin: 0 0 35px;
	font-family: var(--osku-titulos);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--global-palette13);
}

.osku-articulo__antetitulo a {
	color: inherit;
	text-decoration: none;
}

.single-post .entry-header .entry-meta {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--global-palette4);
}

.single-post .article-post-thumbnail {
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: 14px;
}

.single-post .entry-content > p {
	margin: 0 0 24px;
}

.single-post .entry-content > :is(h2, h3) {
	margin: 1.6em 0 24px;
}

.osku-articulo__llamado {
	margin-top: 48px;
}

@media (max-width: 767px) {
	.wp-block-kadence-posts.osku-blog__lista {
		gap: 32px;
	}
}