/* SPI Core: estilos de los shortcodes. Colores y fuentes salen de las globales de Elementor. */
:root {
	--spi-carbon: var(--e-global-color-carbon, #121418);
	--spi-grafito: var(--e-global-color-grafito, #1e2228);
	--spi-acero: var(--e-global-color-acero, #8a929b);
	--spi-plata: var(--e-global-color-plata, #d5d9dd);
	--spi-hueso: var(--e-global-color-hueso, #f5f6f7);
	--spi-tinta: var(--e-global-color-tinta, #23262b);
	--spi-chispa: var(--e-global-color-chispa, #f26b1d);
	--spi-titulos: "Archivo", sans-serif;
}

.spi-flotante {
	position: fixed;
	right: 20px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}
.spi-flotante--wa { bottom: 20px; background: #25d366; color: var(--spi-carbon); }
.spi-flotante--arriba { bottom: 84px; width: 44px; height: 44px; right: 24px; border-radius: 0; background: var(--spi-grafito); color: var(--spi-hueso); }
.spi-flotante--arriba[hidden] { display: none; }
.spi-flotante:focus-visible { outline: 3px solid var(--spi-chispa); outline-offset: 3px; }

.spi-faq { display: grid; gap: 0; border-top: 1px solid var(--spi-plata); }
.spi-faq__item { border-bottom: 1px solid var(--spi-plata); }
.spi-faq__q { padding: 20px 40px 20px 0; position: relative; cursor: pointer; list-style: none; font-family: var(--spi-titulos); font-weight: 700; font-size: 1.125rem; }
.spi-faq__q::-webkit-details-marker { display: none; }
.spi-faq__q::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.5rem; color: var(--spi-chispa); }
.spi-faq__item[open] .spi-faq__q::after { content: "−"; }
.spi-faq__q:focus-visible { outline: 3px solid var(--spi-chispa); outline-offset: 2px; }
.spi-faq__a { padding: 0 0 20px; }

.spi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.spi-lista__item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.spi-lista__num { font-family: var(--spi-titulos); font-weight: 800; font-size: 1.5rem; color: var(--spi-chispa); }
.spi-lista__titulo { margin: 0 0 4px; font-family: var(--spi-titulos); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.spi-lista__texto { margin: 0; }

.spi-grados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.spi-grados__item { background: var(--spi-grafito); color: var(--spi-hueso); }
.spi-grados__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spi-grados__foto--vacia { background: linear-gradient(135deg, var(--spi-acero), var(--spi-grafito)); }
.spi-grados__media { position: relative; }
.spi-grados__nota { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; background: rgb(18 20 24 / 0.78); color: var(--spi-plata); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.spi-grados__cuerpo { padding: 24px; }
.spi-grados__pct { margin: 0 0 8px; font-size: 0.875rem; color: var(--spi-plata); }
.spi-grados__pct span { font-family: var(--spi-titulos); font-weight: 800; font-size: 2.5rem; color: var(--spi-chispa); display: block; line-height: 1; }
.spi-grados__nombre { margin: 0 0 4px; font-family: var(--spi-titulos); font-weight: 700; text-transform: uppercase; font-size: 1.375rem; color: var(--spi-hueso); }
.spi-grados__norma { margin: 0; font-size: 0.875rem; color: var(--spi-acero); }

.spi-tabla-wrap { overflow-x: auto; }
.spi-tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
.spi-tabla th, .spi-tabla td { padding: 14px 16px; border-bottom: 1px solid var(--spi-plata); text-align: left; }
.spi-tabla thead th { font-family: var(--spi-titulos); text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--spi-chispa); }

.spi-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.spi-galeria__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.spi-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.spi-tarjeta { position: relative; background: var(--spi-grafito); color: var(--spi-hueso); display: flex; flex-direction: column; }
.spi-tarjeta__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.spi-tarjeta__cuerpo { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.spi-tarjeta__num { font-family: var(--spi-titulos); font-weight: 800; color: var(--spi-chispa); }
.spi-tarjeta__titulo { margin: 0; font-family: var(--spi-titulos); font-weight: 700; text-transform: uppercase; font-size: 1.375rem; }
.spi-tarjeta__titulo a { color: inherit; text-decoration: none; }
.spi-tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; }
.spi-tarjeta__titulo a:focus-visible { outline: none; }
.spi-tarjeta:focus-within { outline: 3px solid var(--spi-chispa); outline-offset: 3px; }
.spi-tarjeta__texto { margin: 0; color: var(--spi-plata); }
.spi-tarjeta__mas { margin-top: auto; font-family: var(--spi-titulos); font-weight: 700; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--spi-chispa); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}