/*
 * KONEXTEK Child — sistema de diseño corporativo
 * Versión 1.0.0
 *
 * Índice
 *  1. Variables (tokens)
 *  2. Base tipográfica (solo con body.knx-tipografia)
 *  3. Utilidades y accesibilidad
 *  4. Secciones y contenedores
 *  5. Títulos de marca
 *  6. Botones
 *  7. Cabecera (Global Header de Theme Builder)
 *  8. Índice de soluciones
 *  9. Líneas de producto, etiquetas y tarjetas
 * 10. Método
 * 11. Formularios
 * 12. Footer y crédito
 * 13. Contacto flotante y barra móvil
 * 14. Logotipo y fotografía
 *
 * Reglas:
 *  - Todo componente usa el prefijo .knx- y se activa al asignar la clase en
 *    Divi (Avanzado > Clase CSS). Sin la clase, Divi se ve como siempre.
 *  - Esquinas rectas (radio 0) y separación por líneas, no por sombras.
 *  - Naranja como acción y acento. Nunca texto blanco sobre naranja
 *    (contraste 2,9:1); el texto sobre naranja va en grafito (5,2:1).
 */

/* =========================================================================
   1. Variables
   ========================================================================= */
:root {
	/* Color de marca (identidad corporativa v1.0) */
	--knx-grafito: #1f2328;
	--knx-naranja: #f26b1d;
	--knx-acero: #8a9099;
	--knx-marfil: #f4f2ee;
	--knx-blanco: #ffffff;

	/* Tintes funcionales derivados (no son colores de marca nuevos) */
	--knx-texto: var(--knx-grafito);
	--knx-texto-2: #4a4e54;          /* secundario sobre claro, 7,9:1 */
	--knx-texto-inv: var(--knx-marfil);
	--knx-texto-inv-2: #c9ccd1;      /* secundario sobre grafito, 9,9:1 */
	--knx-foto-vacia: #2a2f35;       /* fondo de imagen mientras carga */
	--knx-error: #b42318;
	--knx-linea: rgba(31, 35, 40, 0.15);
	--knx-linea-fuerte: rgba(31, 35, 40, 0.3);
	--knx-linea-inv: rgba(138, 144, 153, 0.35);

	/* Tipografía */
	--knx-fuente: "Manrope", Arial, Helvetica, sans-serif;
	--knx-fuente-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
	--knx-peso-normal: 400;
	--knx-peso-medio: 600;
	--knx-peso-fuerte: 700;
	--knx-peso-titulo: 800;

	--knx-h1: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);   /* 44 → 92 px */
	--knx-h2: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);    /* 36 → 72 px */
	--knx-h3: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);     /* 22 → 32 px */
	--knx-h4: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); /* 19 → 22 px */
	--knx-h5: 1.125rem;
	--knx-h6: 0.875rem;
	--knx-texto-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--knx-texto-base: 1rem;
	--knx-texto-pequeno: 0.875rem;
	--knx-texto-etiqueta: 0.8125rem;
	--knx-interlineado: 1.6;
	--knx-interlineado-titulo: 1.02;
	--knx-tracking-titulo: -0.035em;
	--knx-tracking-versal: 0.12em;

	/* Contenedores */
	--knx-ancho-max: 1280px;
	--knx-ancho-texto: 680px;
	--knx-margen: clamp(16px, 3vw, 32px);

	/* Espaciado (escala de 4/8 px) */
	--knx-e-1: 4px;
	--knx-e-2: 8px;
	--knx-e-3: 12px;
	--knx-e-4: 16px;
	--knx-e-5: 24px;
	--knx-e-6: 32px;
	--knx-e-7: 48px;
	--knx-e-8: 64px;
	--knx-e-9: 96px;
	--knx-e-10: 128px;
	--knx-seccion: clamp(64px, 4rem + 4vw, 128px);

	/* Bordes */
	--knx-radio: 0;
	--knx-borde: 1px solid var(--knx-linea);
	--knx-borde-fuerte: 2px solid var(--knx-grafito);
	--knx-foco: 3px solid var(--knx-naranja);

	/* Botones */
	--knx-btn-alto: 52px;
	--knx-btn-alto-lg: 60px;
	--knx-btn-alto-sm: 44px;
	--knx-btn-relleno: 0 22px;

	/* Formularios */
	--knx-campo-alto: 48px;
	--knx-campo-fondo: var(--knx-blanco);
	--knx-campo-borde: 2px solid var(--knx-grafito);

	/* Cabecera */
	--knx-header-alto: 84px;
	--knx-header-alto-movil: 64px;

	/* Movimiento */
	--knx-transicion: 0.15s ease;

	/*
	 * Puntos de quiebre (referencia; las media queries no aceptan variables):
	 *   móvil ≤ 767 px · tablet 768–980 px · laptop 981–1280 px · escritorio > 1280 px
	 *   Coinciden con los de Divi (767 / 980).
	 */
}

/* =========================================================================
   2. Base tipográfica
   Solo actúa con body.knx-tipografia (la añade el tema; se puede desactivar
   con el filtro knx_tipografia_global). Las opciones de fuente de cada
   módulo de Divi siguen teniendo prioridad.
   ========================================================================= */
html {
	scroll-padding-top: calc(var(--knx-header-alto) + 8px);
}

body.knx-tipografia {
	font-family: var(--knx-fuente);
	font-size: var(--knx-texto-base);
	line-height: var(--knx-interlineado);
	color: var(--knx-texto);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.knx-tipografia h1,
body.knx-tipografia h2,
body.knx-tipografia h3,
body.knx-tipografia h4,
body.knx-tipografia h5,
body.knx-tipografia h6 {
	font-family: var(--knx-fuente);
	font-weight: var(--knx-peso-titulo);
	color: inherit;
	padding-bottom: 0.4em;
}

body.knx-tipografia h1 { font-size: var(--knx-h1); line-height: 0.98; letter-spacing: var(--knx-tracking-titulo); }
body.knx-tipografia h2 { font-size: var(--knx-h2); line-height: 1; letter-spacing: var(--knx-tracking-titulo); }
body.knx-tipografia h3 { font-size: var(--knx-h3); line-height: 1.15; letter-spacing: -0.015em; }
body.knx-tipografia h4 { font-size: var(--knx-h4); line-height: 1.25; font-weight: var(--knx-peso-fuerte); }
body.knx-tipografia h5 { font-size: var(--knx-h5); line-height: 1.3; font-weight: var(--knx-peso-fuerte); }
body.knx-tipografia h6 { font-size: var(--knx-h6); line-height: 1.4; font-weight: var(--knx-peso-titulo); letter-spacing: var(--knx-tracking-versal); text-transform: uppercase; }

/* =========================================================================
   3. Utilidades y accesibilidad
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--knx-foco);
	outline-offset: 3px;
}

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

.knx-mono { font-family: var(--knx-fuente-mono); font-size: var(--knx-texto-etiqueta); }
.knx-lead { font-size: var(--knx-texto-lead); line-height: 1.55; }
.knx-texto-2 { color: var(--knx-texto-2); }
.knx-centro { text-align: center; }

.knx-enlace,
.knx-enlace a {
	color: inherit;
	font-weight: var(--knx-peso-fuerte);
	text-decoration: none;
	border-bottom: 2px solid var(--knx-naranja);
	padding-bottom: 2px;
	transition: border-color var(--knx-transicion);
}
.knx-enlace:hover,
.knx-enlace a:hover { border-bottom-color: currentColor; }

/* =========================================================================
   4. Secciones y contenedores
   Aplicar a Secciones de Divi: knx-seccion + una variante de color.
   ========================================================================= */
.knx-contenedor {
	width: 100%;
	max-width: var(--knx-ancho-max);
	margin-inline: auto;
	padding-inline: var(--knx-margen);
	box-sizing: border-box;
}

.knx-seccion { padding-block: var(--knx-seccion); }
.knx-seccion--marfil { background-color: var(--knx-marfil); color: var(--knx-texto); }
.knx-seccion--blanca { background-color: var(--knx-blanco); color: var(--knx-texto); }
.knx-seccion--naranja { background-color: var(--knx-naranja); color: var(--knx-grafito); }
.knx-seccion--oscura { background-color: var(--knx-grafito); color: var(--knx-texto-inv); }

.knx-seccion--oscura :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend) { color: inherit; }
.knx-seccion--oscura .knx-texto-2 { color: var(--knx-texto-inv-2); }
.knx-seccion--oscura a:not([class*="knx-btn"]) { color: var(--knx-texto-inv); }
.knx-seccion--oscura a:not([class*="knx-btn"]):hover { color: var(--knx-naranja); }

/* =========================================================================
   5. Títulos de marca
   ========================================================================= */
/* Título con la barra "/" naranja (trazo de la X del logotipo). */
.knx-titulo-barra :is(h1, h2, h3)::after,
:is(h1, h2, h3).knx-titulo-barra::after {
	content: "/";
	color: var(--knx-naranja);
	margin-left: 0.02em;
}
.knx-seccion--naranja .knx-titulo-barra :is(h1, h2, h3)::after,
.knx-seccion--naranja :is(h1, h2, h3).knx-titulo-barra::after { color: var(--knx-marfil); }

/* Título con punto final naranja. */
.knx-titulo-punto :is(h1, h2, h3)::after,
:is(h1, h2, h3).knx-titulo-punto::after {
	content: ".";
	color: var(--knx-naranja);
}

/* Antetítulo: Manrope 800 versal con barra naranja. */
.knx-antetitulo {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--knx-fuente);
	font-size: var(--knx-texto-etiqueta);
	font-weight: var(--knx-peso-titulo);
	letter-spacing: var(--knx-tracking-versal);
	text-transform: uppercase;
	line-height: 1.4;
}
.knx-antetitulo::before { content: "/"; color: var(--knx-naranja); }

/* Franja de capacidades: "Redes / Fibra / ..." */
.knx-franja {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: var(--knx-peso-medio);
	font-size: 0.9375rem;
}
.knx-franja li { padding: 0; }
.knx-franja li + li::before { content: "/"; color: var(--knx-naranja); margin-right: 14px; }

/* =========================================================================
   6. Botones
   Funcionan con <a class="knx-btn ..."> y con el módulo Botón de Divi
   (Avanzado > Clase CSS: knx-btn knx-btn--primario knx-btn--partido).
   ========================================================================= */
.knx-btn,
body .et_pb_button.knx-btn,
.knx-btn .et_pb_button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--knx-btn-alto);
	padding: var(--knx-btn-relleno);
	border: 0;
	border-radius: var(--knx-radio);
	font-family: var(--knx-fuente);
	font-size: 1rem;
	font-weight: var(--knx-peso-fuerte);
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color var(--knx-transicion), color var(--knx-transicion);
}

/* Anula el icono y el desplazamiento del botón por defecto de Divi. */
body .et_pb_button.knx-btn::after,
body .et_pb_button.knx-btn::before,
.knx-btn .et_pb_button::after,
.knx-btn .et_pb_button::before { display: none; }
body .et_pb_button.knx-btn:hover,
.knx-btn .et_pb_button:hover { padding: var(--knx-btn-relleno); border: 0; }

/* Primario: naranja con texto grafito */
.knx-btn--primario,
body .et_pb_button.knx-btn--primario,
.knx-btn--primario .et_pb_button { background-color: var(--knx-naranja); color: var(--knx-grafito); }
.knx-btn--primario:hover,
body .et_pb_button.knx-btn--primario:hover,
.knx-btn--primario .et_pb_button:hover { background-color: var(--knx-grafito); color: var(--knx-marfil); }

/* Secundario: grafito con texto marfil */
.knx-btn--secundario,
body .et_pb_button.knx-btn--secundario,
.knx-btn--secundario .et_pb_button { background-color: var(--knx-grafito); color: var(--knx-marfil); }
.knx-btn--secundario:hover,
body .et_pb_button.knx-btn--secundario:hover,
.knx-btn--secundario .et_pb_button:hover { background-color: var(--knx-naranja); color: var(--knx-grafito); }

/* Contorno: borde grafito (o marfil en secciones oscuras) */
.knx-btn--contorno,
body .et_pb_button.knx-btn--contorno,
.knx-btn--contorno .et_pb_button { background-color: transparent; color: var(--knx-grafito); box-shadow: inset 0 0 0 2px var(--knx-grafito); }
.knx-btn--contorno:hover,
body .et_pb_button.knx-btn--contorno:hover,
.knx-btn--contorno .et_pb_button:hover { background-color: var(--knx-grafito); color: var(--knx-marfil); }
.knx-seccion--oscura .knx-btn--contorno,
.knx-seccion--oscura .knx-btn--contorno .et_pb_button { color: var(--knx-marfil); box-shadow: inset 0 0 0 2px var(--knx-marfil); }
.knx-seccion--oscura .knx-btn--contorno:hover,
.knx-seccion--oscura .knx-btn--contorno .et_pb_button:hover { background-color: var(--knx-marfil); color: var(--knx-grafito); }

/* Partido: texto + celda de flecha (firma de KONEXTEK) */
.knx-btn--partido,
body .et_pb_button.knx-btn--partido,
.knx-btn--partido .et_pb_button { padding-right: calc(var(--knx-btn-alto) + 22px); }
body .et_pb_button.knx-btn--partido:hover,
.knx-btn--partido .et_pb_button:hover { padding-right: calc(var(--knx-btn-alto) + 22px); }
.knx-btn--partido::after,
body .et_pb_button.knx-btn--partido::after,
.knx-btn--partido .et_pb_button::after {
	content: "\2192";
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--knx-btn-alto);
	align-items: center;
	justify-content: center;
	margin: 0;
	opacity: 1;
	font-family: var(--knx-fuente);
	font-size: 1.125rem;
	line-height: 1;
	background-color: var(--knx-grafito);
	color: var(--knx-marfil);
	transition: background-color var(--knx-transicion), color var(--knx-transicion);
}
.knx-btn--secundario.knx-btn--partido::after,
body .et_pb_button.knx-btn--secundario.knx-btn--partido::after,
.knx-btn--secundario.knx-btn--partido .et_pb_button::after,
.knx-seccion--oscura .knx-btn--primario.knx-btn--partido::after,
.knx-seccion--oscura .knx-btn--primario.knx-btn--partido .et_pb_button::after {
	background-color: var(--knx-marfil);
	color: var(--knx-grafito);
}
.knx-btn--secundario.knx-btn--partido::after,
.knx-btn--secundario.knx-btn--partido .et_pb_button::after { background-color: var(--knx-naranja); }

/* Tamaños */
.knx-btn--lg,
body .et_pb_button.knx-btn--lg,
.knx-btn--lg .et_pb_button { min-height: var(--knx-btn-alto-lg); font-size: 1.0625rem; }
.knx-btn--sm,
body .et_pb_button.knx-btn--sm,
.knx-btn--sm .et_pb_button { min-height: var(--knx-btn-alto-sm); font-size: 0.9375rem; padding: 0 18px; }
.knx-btn--lg.knx-btn--partido::after,
.knx-btn--lg.knx-btn--partido .et_pb_button::after { width: var(--knx-btn-alto-lg); }
.knx-btn--lg.knx-btn--partido,
.knx-btn--lg.knx-btn--partido .et_pb_button { padding-right: calc(var(--knx-btn-alto-lg) + 24px); }
.knx-btn--sm.knx-btn--partido::after,
.knx-btn--sm.knx-btn--partido .et_pb_button::after { width: var(--knx-btn-alto-sm); }
.knx-btn--sm.knx-btn--partido,
.knx-btn--sm.knx-btn--partido .et_pb_button { padding-right: calc(var(--knx-btn-alto-sm) + 18px); }

.knx-btn--bloque,
.knx-btn--bloque .et_pb_button { width: 100%; justify-content: flex-start; }

/* =========================================================================
   7. Cabecera — clase knx-header en la Sección del Global Header
   ========================================================================= */
.knx-header {
	background-color: var(--knx-grafito);
	color: var(--knx-texto-inv);
	border-bottom: 1px solid var(--knx-linea-inv);
	transition: box-shadow var(--knx-transicion);
}
.knx-header.knx-header--fija {
	position: sticky;
	top: 0;
	z-index: 99;
}
body.admin-bar .knx-header.knx-header--fija { top: 32px; }
.knx-header.knx-header--desplazada { box-shadow: 0 6px 24px rgba(31, 35, 40, 0.25); }

.knx-header .et_pb_row { padding-block: 0; }

/* Módulo Menú de Divi dentro del header */
.knx-header .et_pb_menu,
.knx-header .et_pb_menu__wrap { background-color: transparent; }
.knx-header .et-menu > li > a,
.knx-header .et_pb_menu .et-menu-nav > ul > li > a {
	font-family: var(--knx-fuente);
	font-size: 0.9375rem;
	font-weight: var(--knx-peso-medio);
	color: var(--knx-texto-inv);
	opacity: 0.88;
	padding-block: 32px;
	border-bottom: 2px solid transparent;
	transition: opacity var(--knx-transicion), color var(--knx-transicion);
}
.knx-header .et-menu > li > a:hover,
.knx-header .et-menu > li.current-menu-item > a,
.knx-header .et-menu > li.current-menu-ancestor > a {
	opacity: 1;
	color: var(--knx-naranja);
}

/* Desplegable */
.knx-header .et-menu .sub-menu,
.knx-header .nav li ul {
	background-color: var(--knx-blanco);
	border: 0;
	border-top: 3px solid var(--knx-naranja);
	border-radius: 0;
	box-shadow: 0 16px 40px rgba(31, 35, 40, 0.18);
	padding: 12px 0;
	width: 280px;
}
.knx-header .et-menu .sub-menu li { padding: 0 12px; width: 100%; }
.knx-header .et-menu .sub-menu a {
	width: 100%;
	padding: 10px 12px;
	color: var(--knx-grafito);
	font-weight: var(--knx-peso-fuerte);
	font-size: 0.9375rem;
	opacity: 1;
}
.knx-header .et-menu .sub-menu a:hover { background-color: var(--knx-marfil); opacity: 1; }

/* Menú móvil de Divi */
.knx-header .mobile_menu_bar::before { color: var(--knx-naranja); }
.knx-header .et_mobile_menu {
	background-color: var(--knx-grafito);
	border-top: 3px solid var(--knx-naranja);
	border-radius: 0;
	padding: 8px var(--knx-margen) 24px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.knx-header .et_mobile_menu li a {
	color: var(--knx-texto-inv);
	font-family: var(--knx-fuente);
	font-size: 1.25rem;
	font-weight: var(--knx-peso-fuerte);
	padding: 16px 0;
	border-bottom: 1px solid var(--knx-linea-inv);
}
.knx-header .et_mobile_menu li li a { font-size: 1rem; font-weight: var(--knx-peso-medio); color: var(--knx-texto-inv-2); padding-left: 16px; }
.knx-header .et_mobile_menu li a:hover { background-color: transparent; color: var(--knx-naranja); opacity: 1; }

/* Bloque de contacto del header (teléfono + correo) */
.knx-header__contacto {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: var(--knx-texto-etiqueta);
	line-height: 1.4;
}
.knx-header__contacto a { color: var(--knx-texto-inv); text-decoration: none; }
.knx-header__contacto .knx-contacto--telefono { font-size: 0.9375rem; font-weight: var(--knx-peso-fuerte); }
.knx-header__contacto .knx-contacto--correo { color: var(--knx-texto-inv-2); }
.knx-header__contacto a:hover { color: var(--knx-naranja); }

/* =========================================================================
   8. Índice de soluciones (filas numeradas)
   Estructura HTML en README > Componentes.
   ========================================================================= */
.knx-indice {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--knx-borde-fuerte);
	counter-reset: knx-indice;
}
.knx-indice > li { padding: 0; border-bottom: 1px solid var(--knx-linea-fuerte); }
.knx-indice__fila {
	display: grid;
	grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1.4fr) 56px;
	gap: var(--knx-e-5);
	align-items: center;
	padding: 28px 0;
	color: var(--knx-texto);
	text-decoration: none;
	transition: background-color var(--knx-transicion);
}
.knx-indice__fila:hover,
.knx-indice > li.is-abierta > .knx-indice__fila { background-color: var(--knx-blanco); }
.knx-indice__num {
	padding-left: var(--knx-e-4);
	font-size: 2.75rem;
	font-weight: var(--knx-peso-titulo);
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--knx-acero);
	transition: color var(--knx-transicion);
}
.knx-indice__titulo { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: var(--knx-peso-titulo); line-height: 1.15; letter-spacing: -0.015em; }
.knx-indice__texto { color: var(--knx-texto-2); }
.knx-indice__ir {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 0 2px var(--knx-grafito);
	font-weight: var(--knx-peso-fuerte);
	transition: background-color var(--knx-transicion), box-shadow var(--knx-transicion);
}
.knx-indice__fila:hover .knx-indice__num,
.knx-indice > li.is-abierta .knx-indice__num { color: var(--knx-naranja); }
.knx-indice__fila:hover .knx-indice__ir,
.knx-indice > li.is-abierta .knx-indice__ir { background-color: var(--knx-naranja); box-shadow: none; }
.knx-indice__detalle {
	display: grid;
	grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1.4fr) 56px;
	gap: var(--knx-e-5);
	padding-bottom: var(--knx-e-6);
	background-color: var(--knx-blanco);
}
.knx-indice__detalle > :first-child { grid-column: 2; }
.knx-indice__detalle ul { margin: 0; padding: 0; list-style: none; border-top: var(--knx-borde); }
.knx-indice__detalle li { padding: 12px 0; border-bottom: var(--knx-borde); }

/* =========================================================================
   9. Líneas de producto, etiquetas y tarjetas
   Sin precios, stock ni carrito: el sitio solo informa qué se comercializa.
   ========================================================================= */
.knx-lineas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	column-gap: var(--knx-e-7);
	margin: 0;
}
.knx-linea { padding: 22px 0; border-top: 1px solid var(--knx-linea-fuerte); }
.knx-linea__titulo,
.knx-lineas dt { margin: 0; font-size: 1.375rem; font-weight: var(--knx-peso-titulo); line-height: 1.25; }
.knx-linea__titulo::before,
.knx-lineas dt::before { content: "/ "; color: var(--knx-naranja); }
.knx-linea__texto,
.knx-lineas dd { margin: 6px 0 0; color: var(--knx-texto-2); }

.knx-etiquetas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.knx-etiquetas > li,
.knx-etiqueta {
	padding: 10px 16px;
	box-shadow: inset 0 0 0 2px currentColor;
	font-weight: var(--knx-peso-fuerte);
	line-height: 1.3;
}

/* Tarjeta genérica (servicios, catálogo informativo futuro) */
.knx-tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--knx-e-4);
	height: 100%;
	padding: var(--knx-e-6);
	background-color: var(--knx-blanco);
	border: var(--knx-borde);
	color: var(--knx-texto);
	box-sizing: border-box;
	transition: border-color var(--knx-transicion);
}
a.knx-tarjeta { text-decoration: none; }
a.knx-tarjeta:hover,
.knx-tarjeta.is-activa { border-color: var(--knx-grafito); }
.knx-tarjeta__codigo { font-family: var(--knx-fuente-mono); font-size: 0.75rem; color: var(--knx-texto-2); }
.knx-tarjeta__titulo { margin: 0; font-size: 1.375rem; font-weight: var(--knx-peso-titulo); line-height: 1.25; }
.knx-tarjeta__texto { margin: 0; color: var(--knx-texto-2); }
.knx-tarjeta__accion { margin-top: auto; font-weight: var(--knx-peso-fuerte); }
.knx-tarjeta__accion::after { content: " \2192"; color: var(--knx-naranja); }

/* Tarjeta de producto informativa (preparada para un catálogo futuro, sin precio) */
.knx-producto { display: flex; flex-direction: column; border: var(--knx-borde); background-color: var(--knx-blanco); }
.knx-producto__imagen { aspect-ratio: 4 / 3; background-color: var(--knx-marfil); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.knx-producto__imagen img { width: 100%; height: 100%; object-fit: contain; padding: var(--knx-e-5); box-sizing: border-box; }
.knx-producto__cuerpo { display: flex; flex-direction: column; gap: var(--knx-e-2); padding: var(--knx-e-5); }
.knx-producto__marca { font-family: var(--knx-fuente-mono); font-size: 0.75rem; color: var(--knx-texto-2); }
.knx-producto__nombre { margin: 0; font-size: 1.125rem; font-weight: var(--knx-peso-titulo); line-height: 1.3; }
.knx-producto__specs { margin: var(--knx-e-2) 0 0; padding: var(--knx-e-3) 0 0; list-style: none; border-top: var(--knx-borde); font-family: var(--knx-fuente-mono); font-size: 0.75rem; color: var(--knx-texto-2); }

/* =========================================================================
   10. Método (pasos con entregable) — sección naranja
   ========================================================================= */
.knx-metodo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--knx-borde-fuerte);
	counter-reset: knx-paso;
}
.knx-metodo > li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 0 0;
	counter-increment: knx-paso;
}
.knx-metodo > li::before {
	content: counter(knx-paso);
	font-size: 4.5rem;
	font-weight: var(--knx-peso-titulo);
	line-height: 1;
	letter-spacing: -0.04em;
}
.knx-metodo__titulo { font-size: 1.375rem; font-weight: var(--knx-peso-titulo); }
.knx-metodo__entregable { font-family: var(--knx-fuente-mono); font-size: 0.75rem; font-weight: 500; }
.knx-metodo__entregable::before { content: "\2192  "; }

/* =========================================================================
   11. Formularios
   Clase knx-form en el módulo Formulario de contacto de Divi o en un
   contenedor de otro plugin de formularios.
   ========================================================================= */
.knx-form {
	background-color: var(--knx-marfil);
	color: var(--knx-grafito);
	padding: clamp(20px, 3vw, 40px);
}
.knx-form label,
.knx-form legend,
.knx-form .et_pb_contact_form_label { font-family: var(--knx-fuente); font-size: var(--knx-texto-pequeno); font-weight: var(--knx-peso-medio); color: var(--knx-grafito); }

.knx-form input[type="text"],
.knx-form input[type="email"],
.knx-form input[type="tel"],
.knx-form input[type="number"],
.knx-form input[type="url"],
.knx-form select,
.knx-form textarea,
.knx-form .et_pb_contact_field .input,
.knx-form .et_pb_contact p input,
.knx-form .et_pb_contact p textarea,
.knx-form .et_pb_contact_select {
	width: 100%;
	min-height: var(--knx-campo-alto);
	padding: 12px 14px;
	border: 0;
	border-bottom: var(--knx-campo-borde);
	border-radius: 0;
	background-color: var(--knx-campo-fondo);
	color: var(--knx-grafito);
	font-family: var(--knx-fuente);
	font-size: 1rem;
	box-sizing: border-box;
}
.knx-form textarea,
.knx-form .et_pb_contact p textarea { min-height: 120px; resize: vertical; }
.knx-form ::placeholder { color: #6b7076; opacity: 1; }
.knx-form input:focus,
.knx-form select:focus,
.knx-form textarea:focus { outline: var(--knx-foco); outline-offset: 0; }

.knx-form [aria-invalid="true"],
.knx-form .et_contact_error { border-bottom-color: var(--knx-error) !important; }
.knx-form .knx-form__error,
.knx-form .et-pb-contact-message ul { color: var(--knx-error); font-size: var(--knx-texto-pequeno); }

.knx-form input[type="checkbox"],
.knx-form input[type="radio"] { width: 20px; height: 20px; accent-color: var(--knx-grafito); }

/* Selector "¿Qué necesita?" como fichas */
.knx-form__opciones { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin: 0; padding: 0; }
.knx-form__opcion {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 18px;
	box-shadow: inset 0 0 0 2px var(--knx-grafito);
	font-weight: var(--knx-peso-fuerte);
	cursor: pointer;
}
.knx-form__opcion:has(input:checked) { background-color: var(--knx-grafito); color: var(--knx-marfil); }
.knx-form__opcion input { accent-color: var(--knx-naranja); margin: 0; }

/* Botón de envío del módulo de Divi */
.knx-form .et_pb_contact_submit,
.knx-form button[type="submit"],
.knx-form input[type="submit"] {
	min-height: var(--knx-btn-alto-lg);
	padding: 0 28px;
	border: 0;
	border-radius: 0;
	background-color: var(--knx-naranja);
	color: var(--knx-grafito);
	font-family: var(--knx-fuente);
	font-size: 1.0625rem;
	font-weight: var(--knx-peso-fuerte);
	cursor: pointer;
	transition: background-color var(--knx-transicion), color var(--knx-transicion);
}
.knx-form .et_pb_contact_submit::after { display: none; }
.knx-form .et_pb_contact_submit:hover,
.knx-form button[type="submit"]:hover,
.knx-form input[type="submit"]:hover { background-color: var(--knx-grafito); color: var(--knx-marfil); padding: 0 28px; border: 0; }

/* =========================================================================
   12. Footer y crédito — clase knx-footer en la Sección del Global Footer
   ========================================================================= */
.knx-footer {
	background-color: var(--knx-grafito);
	color: var(--knx-texto-inv);
	border-top: 1px solid var(--knx-linea-inv);
}
.knx-footer a { color: var(--knx-texto-inv); text-decoration: none; }
.knx-footer a:hover { color: var(--knx-naranja); }
.knx-footer .knx-footer__nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; font-weight: var(--knx-peso-medio); }
.knx-footer .knx-footer__nav li { padding: 0; }

/* Firma: logotipo a todo el ancho */
.knx-firma .knx-logo,
.knx-firma .knx-logo svg { display: block; width: 100%; height: auto; }

.knx-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	border-top: 1px solid var(--knx-linea-inv);
	font-size: var(--knx-texto-etiqueta);
	line-height: 1.5;
	color: var(--knx-acero);
}
.knx-legal p { margin: 0; padding: 0; color: inherit; }
.knx-credito { color: var(--knx-texto-inv-2); }
.knx-footer .knx-credito a,
.knx-credito a {
	color: var(--knx-texto-inv);
	font-weight: var(--knx-peso-medio);
	text-decoration: underline;
	text-decoration-color: var(--knx-naranja);
	text-underline-offset: 3px;
}
.knx-footer .knx-credito a:hover,
.knx-credito a:hover { color: var(--knx-naranja); }

/* =========================================================================
   13. Contacto flotante y barra móvil
   ========================================================================= */
.knx-whatsapp-flotante {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 22px 0 18px;
	background-color: var(--knx-grafito);
	color: var(--knx-marfil);
	font-family: var(--knx-fuente);
	font-weight: var(--knx-peso-fuerte);
	text-decoration: none;
	box-shadow: inset -8px 0 0 var(--knx-naranja), 0 10px 28px rgba(31, 35, 40, 0.35);
	transition: background-color var(--knx-transicion);
}
.knx-whatsapp-flotante:hover { background-color: #2c3138; color: var(--knx-marfil); }

.knx-barra-movil { display: none; }
.knx-barra-movil a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: var(--knx-grafito);
	font-family: var(--knx-fuente);
	font-size: 0.8125rem;
	font-weight: var(--knx-peso-fuerte);
	text-decoration: none;
}
.knx-barra-movil a + a { border-left: 1px solid var(--knx-linea-fuerte); }
.knx-barra-movil .knx-barra-movil__cotizar {
	flex-direction: row;
	gap: 8px;
	background-color: var(--knx-naranja);
	font-size: 0.9375rem;
	font-weight: var(--knx-peso-titulo);
	border-left: 0;
}

/* =========================================================================
   14. Logotipo y fotografía
   ========================================================================= */
.knx-logo-enlace { display: inline-flex; line-height: 0; color: inherit; }
.knx-logo { display: inline-block; line-height: 0; width: var(--knx-logo-w, 164px); max-width: 100%; }
.knx-logo svg { display: block; width: 100%; height: auto; }
.knx-logo__texto {
	font-family: var(--knx-fuente);
	font-size: 1.375rem;
	font-weight: var(--knx-peso-titulo);
	letter-spacing: 0.04em;
	line-height: 1;
}

.knx-foto img,
img.knx-foto { display: block; width: 100%; height: 100%; object-fit: cover; background-color: var(--knx-foto-vacia); }
.knx-foto--alta img,
img.knx-foto--alta { min-height: 420px; }
.knx-pie-foto { font-family: var(--knx-fuente-mono); font-size: 0.6875rem; color: var(--knx-acero); }

/* Diagonal de marca: una por composición, ángulo del trazo de la X (56,6°) */
.knx-diagonal { position: relative; overflow: hidden; }
.knx-diagonal::before {
	content: "";
	position: absolute;
	left: 18%;
	bottom: -4%;
	z-index: 1;
	width: 26px;
	height: 112%;
	background-color: var(--knx-naranja);
	transform: rotate(33.4deg);
	transform-origin: bottom left;
	pointer-events: none;
}

/* =========================================================================
   15. Landing — ajustes para módulos de Divi (v1.0.1)
   Clases asignadas en Avanzado > Clase CSS de secciones, columnas y módulos.
   ========================================================================= */

/* Foto que llena su columna (hero y fotos de sección) */
.knx-foto-llena { position: relative; min-height: 520px; }
.knx-foto-llena .et_pb_module,
.knx-foto-llena .et_pb_image,
.knx-foto-llena .et_pb_image_wrap { height: 100%; margin: 0; }
.knx-foto-llena .et_pb_image { position: absolute; inset: 0; }
.knx-foto-llena .et_pb_image_wrap { display: block; }
.knx-foto-llena img { display: block; width: 100%; height: 100%; object-fit: cover; background-color: var(--knx-foto-vacia); }

/* La diagonal queda por encima de la foto */
.knx-diagonal { isolation: isolate; }
.knx-diagonal::before { z-index: 2; }

/* Banda fotográfica: 4 fotos a sangre con pie */
.knx-banda .et_pb_column { margin: 0; }
.knx-banda .et_pb_image { margin: 0; }
.knx-banda .et_pb_image img { display: block; width: 100%; height: 340px; object-fit: cover; }
.knx-banda .knx-banda__pie { padding: 14px 20px; margin: 0; color: var(--knx-marfil); font-weight: var(--knx-peso-fuerte); font-size: 0.9375rem; }
.knx-banda .knx-banda__pie::before { content: "/ "; color: var(--knx-naranja); }

/* Índice dentro de un módulo Texto: sin márgenes de lista de Divi */
.et_pb_text .knx-indice,
.et_pb_text .knx-metodo,
.et_pb_text .knx-etiquetas,
.et_pb_text .knx-franja { padding-left: 0; }
.et_pb_text .knx-indice li,
.et_pb_text .knx-metodo li,
.et_pb_text .knx-etiquetas li,
.et_pb_text .knx-franja li { list-style: none; }
.et_pb_text .knx-indice__detalle ul { padding-left: 0; }
.et_pb_text .knx-indice__detalle li { list-style: none; }

/* Datos de contacto grandes en la sección Contacto */
.knx-datos-contacto { margin: 0; }
.knx-datos-contacto > div { padding: 18px 0; border-top: 1px solid var(--knx-linea-inv); }
.knx-datos-contacto > div:last-child { border-bottom: 1px solid var(--knx-linea-inv); }
.knx-datos-contacto dt { font-size: var(--knx-texto-etiqueta); font-weight: var(--knx-peso-fuerte); letter-spacing: var(--knx-tracking-versal); text-transform: uppercase; color: var(--knx-acero); }
.knx-datos-contacto dd { margin: 4px 0 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: var(--knx-peso-titulo); color: var(--knx-marfil); }
.knx-datos-contacto dd a { color: inherit; text-decoration: none; }
.knx-datos-contacto dd a:hover { color: var(--knx-naranja); }