/* Decimo: CSS custom del child theme. Presupuesto: máximo 62 líneas en todo el sitio (Oscar: 50 → 55 → 57 → 62, 7 nov 2026). */

/* Portfolio (archivo de posts y categorías): el título imita los headings de la Home,
   porque Kadence Free no tiene control de tipografía solo para el título del archivo. */
.post-archive-title .archive-title {
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(2rem, 1rem + 4vw, 2.83rem);
}

/* Hero de la Home (solo con body.decimo-fx, ver functions.php): ciclo de 12 s crema → oscuro → crema, con aberración
   cromática y "tirón de señal" (filtro SVG #dk-signal) en cada cambio, scan lines, punto que late, flecha y cursor. */
@property --dk-mis { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --dk-deep { syntax: '<color>'; inherits: true; initial-value: #1d5050; }
@property --dk-ink { syntax: '<color>'; inherits: true; initial-value: #0f2b2b; }
@property --dk-gray { syntax: '<color>'; inherits: true; initial-value: #8f9fa3; }
@property --dk-scan { syntax: '<color>'; inherits: true; initial-value: rgba(15,43,43,.07); }
.decimo-fx .kb-row-layout-id13_f285db-40 { background-image: repeating-linear-gradient(var(--dk-scan) 0 1px, transparent 1px 4px); animation: dk-tone 12s ease-in-out infinite;
	--global-palette4: var(--dk-ink); --wp--preset--color--theme-palette-4: var(--dk-ink); --global-palette6: var(--dk-gray); --wp--preset--color--theme-palette-6: var(--dk-gray); }
@keyframes dk-tone { 0%, 46%, 100% { background-color: #f2efe8; --dk-deep: #1d5050; --dk-ink: #0f2b2b; --dk-gray: #8f9fa3; --dk-scan: rgba(15,43,43,.07); }
	52%, 92% { background-color: #0b2222; --dk-deep: #f2efe8; --dk-ink: #f2efe8; --dk-gray: #9fb0b1; --dk-scan: rgba(242,239,232,.06); } }
.decimo-fx .kadence-column13_cb8bd5-90 .kt-adv-heading13_d5d7b3-2b[data-kb-block] { color: var(--dk-deep); }
.decimo-fx .kadence-column13_cb8bd5-90 .wp-block-kadence-advancedheading { text-shadow: calc(var(--dk-mis) * -1) calc(var(--dk-mis) * -.35) 0 rgba(255,117,37,.75), var(--dk-mis) calc(var(--dk-mis) * .35) 0 rgba(41,182,201,.6); }
.decimo-fx .kadence-column13_cb8bd5-90 > .kt-inside-inner-col { animation: dk-mis 12s ease-in-out infinite; }
@keyframes dk-mis { 0% { --dk-mis: 16px; } 9% { --dk-mis: 2px; } 14% { --dk-mis: 4px; } 22%, 46% { --dk-mis: 0px; } 49% { --dk-mis: 12px; } 54% { --dk-mis: 3px; } 60%, 92% { --dk-mis: 0px; } 100% { --dk-mis: 16px; } }
.decimo-fx .kadence-column13_cb8bd5-90, .decimo-fx .kb-btn13_5ee0c7-b2 { animation: dk-glitch 12s steps(1) infinite; } .decimo-fx .kb-btn13_5ee0c7-b2 { animation-delay: -3s; }
@keyframes dk-glitch { 0% { filter: url(#dk-signal); transform: translateX(5px); } 1% { transform: translateX(-7px) skewX(-5deg); } 2% { filter: none; transform: none; } 3.5% { filter: url(#dk-signal); transform: translateX(3px); } 4.5%, 46.5% { filter: none; transform: none; }
	47.5% { filter: url(#dk-signal); transform: translateX(-6px); } 48.5% { transform: translateX(4px) skewX(4deg); } 49.5% { filter: none; transform: none; } 50.5% { filter: url(#dk-signal); transform: translateX(-2px); } 51.5%, 92.5% { filter: none; transform: none; }
	93.5% { filter: url(#dk-signal); transform: translateX(6px); } 94.5% { transform: translateX(-4px) skewX(-4deg); } 95.5%, 100% { filter: none; transform: none; } }
.decimo-fx .kadence-column13_cb8bd5-90 p:hover { animation: dk-glitch-h .55s steps(1); }
@keyframes dk-glitch-h { 0% { filter: url(#dk-signal); transform: translateX(5px); } 14% { transform: translateX(-7px) skewX(-5deg); } 26% { filter: none; transform: none; } 44% { filter: url(#dk-signal); transform: translateX(3px); } 56% { transform: translateX(-2px); } 68%, 100% { filter: none; transform: none; } }
.decimo-fx .kt-adv-heading13_b80171-2e mark { display: inline-block; transform-origin: 50% 85%; animation: dk-beat 1.6s ease-in-out 3; }
.decimo-fx .kadence-column13_cb8bd5-90:hover mark { animation: dk-beat-h 1.6s ease-in-out; }
@keyframes dk-beat { 0%, 55%, 100% { transform: scale(1); } 66% { transform: scale(1.4); } 78% { transform: scale(.92); } 88% { transform: scale(1.18); } } @keyframes dk-beat-h { 0%, 55%, 100% { transform: scale(1); } 66% { transform: scale(1.4); } 78% { transform: scale(.92); } 88% { transform: scale(1.18); } }
.decimo-arrow { display: inline-block; animation: dk-nudge 1.6s ease-in-out 3; }
a:hover > * > .decimo-arrow { animation: dk-nudge-h .8s ease-in-out infinite; }
@keyframes dk-nudge { 50% { transform: translateY(.28em); } } @keyframes dk-nudge-h { 50% { transform: translateY(.28em); } }
.decimo-fx .kt-adv-heading13_38f131-62::after { content: ""; display: inline-block; width: .5em; height: 1.05em; margin-left: .25em; vertical-align: -.17em; background: var(--global-palette1); animation: dk-blink 1.1s steps(1) 4.5; }
@keyframes dk-blink { 50% { opacity: 0; } }
.decimo-pause { position: absolute; right: 16px; bottom: 14px; font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--dk-ink); background: none; border: 1px solid; border-radius: 99px; padding: 6px 10px; cursor: pointer; opacity: .7; }
.decimo-pause:hover, .decimo-pause:focus-visible { opacity: 1; background: none; color: var(--dk-ink); }
.decimo-paused, .decimo-paused::after, .decimo-paused *, .decimo-paused *::after { animation-play-state: paused !important; }
/* Servicios (#services): scan lines, tirón en el título al hover, cursor, y al entrar en pantalla (hero.js) aberración del título y tarjetas que se "imprimen". */
.decimo-fx #services { background-image: repeating-linear-gradient(rgba(242,239,232,.035) 0 1px, transparent 1px 4px); }
.decimo-fx #services .kt-blocks-info-box-link-wrap:hover h3, .decimo-fx .kb-btn13_5ee0c7-b2:hover .kt-btn-inner-text { animation: dk-glitch-h .55s steps(1); } .decimo-fx .kb-btn13_5ee0c7-b2:hover .kt-btn-inner-text { animation-duration: .9s; animation-iteration-count: infinite; text-shadow: -3px -1px 0 #ff7525, 3px 1px 0 #29b6c9; }
.decimo-fx .kt-adv-heading13_86bafc-6b::after { content: ""; display: inline-block; width: .5em; height: 1.05em; margin-left: .3em; vertical-align: -.2em; background: var(--global-palette10); }
.dk-in .kt-adv-heading13_86bafc-6b::after { animation: dk-blink 1.1s steps(1) 4.5; }
.dk-in .wp-block-kadence-advancedheading[class*="13_41fb59-02"], .dk-in .wp-block-kadence-advancedheading[class*="13_f14380-ae"] { text-shadow: calc(var(--dk-mis) * -1) calc(var(--dk-mis) * -.35) 0 rgba(255,117,37,.75), var(--dk-mis) calc(var(--dk-mis) * .35) 0 rgba(41,182,201,.6); animation: dk-mis-in 1.6s cubic-bezier(.2,.8,.2,1) backwards, dk-mis-loop 7s ease-in-out 1.6s infinite; }
.dk-in .wp-block-kadence-advancedheading[class*="13_f14380-ae"] { animation-delay: .12s, 1.72s; }
@keyframes dk-mis-in { 0% { --dk-mis: 16px; } 40% { --dk-mis: 2px; } 60% { --dk-mis: 4px; } 100% { --dk-mis: 0px; } }
@keyframes dk-mis-loop { 0%, 86%, 100% { --dk-mis: 0px; } 89% { --dk-mis: 4px; } 92% { --dk-mis: 1.5px; } 95% { --dk-mis: 3px; } }
.dk-in .dk-w { display: inline-block; text-shadow: calc(var(--dk-mis) * -1) calc(var(--dk-mis) * -.35) 0 rgba(255,117,37,.8), var(--dk-mis) calc(var(--dk-mis) * .35) 0 rgba(41,182,201,.65); animation: dk-word 5s ease-out calc(var(--dk-wi, 0) * .35s) infinite; } /* OUR WORK: palabra por palabra (hero.js) */
@keyframes dk-word { 0% { --dk-mis: 18px; transform: translateX(-4px); } 4% { --dk-mis: 3px; transform: translateX(3px); } 7% { --dk-mis: 9px; transform: translateX(-2px); } 11% { --dk-mis: 1px; transform: none; } 15%, 100% { --dk-mis: 0px; transform: none; } }
.dk-wait .kt-blocks-info-box-link-wrap { clip-path: inset(0 0 100% 0); }
.dk-print .kt-blocks-info-box-link-wrap { animation: dk-print .5s steps(6) calc(var(--dk-i, 0) * 90ms) backwards; }
@keyframes dk-print { from { clip-path: inset(0 0 100% 0); opacity: .2; } }
#colophon { position: relative; overflow: hidden; isolation: isolate; --dk-ink: #f2efe8; --fx: 50%; --fy: 40%; background-image: linear-gradient(transparent, rgba(51,153,153,.14) 50%, transparent), repeating-linear-gradient(rgba(242,239,232,.035) 0 1px, transparent 1px 4px), radial-gradient(rgba(242,239,232,.08) 1px, transparent 1.6px); background-size: 100% 160px, auto, 18px 18px; background-repeat: no-repeat, repeat, repeat; animation: dk-sweep 9s linear infinite; } /* Footer (todas las páginas, footer.js): barrido CRT, linterna y DECIMO gigante */
@keyframes dk-sweep { 0% { background-position: 0 -160px, 0 0, 0 0; } 55%, 100% { background-position: 0 calc(100% + 160px), 0 0, 0 0; } }
#colophon::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--fo, 0); transition: opacity .4s; background: radial-gradient(circle 220px at var(--fx) var(--fy), rgba(51,153,153,.4), rgba(255,117,37,.12) 50%, transparent 72%), radial-gradient(rgba(242,239,232,.6) 1px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask: radial-gradient(circle 260px at var(--fx) var(--fy), #000 30%, transparent 75%); mask: radial-gradient(circle 260px at var(--fx) var(--fy), #000 30%, transparent 75%); }
#colophon::after { content: "DECIMO" / ""; position: absolute; left: 0; right: 0; bottom: -.28em; z-index: -1; text-align: center; pointer-events: none; white-space: nowrap; font: 900 clamp(6rem, 26vw, 24rem)/1 var(--global-heading-font-family, sans-serif); color: rgba(242,239,232,.03); text-shadow: calc(var(--dk-mis) * -1) 0 0 rgba(255,117,37,.09), var(--dk-mis) 0 0 rgba(41,182,201,.08); animation: dk-word 6s ease-out infinite; }
#colophon .decimo-pause { top: 14px; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .decimo-fx .kb-row-layout-id13_f285db-40, .decimo-fx .kb-row-layout-id13_f285db-40 *, .decimo-fx .kb-row-layout-id13_f285db-40 *::after, .decimo-fx #services *, .decimo-fx #services *::after, .decimo-fx #work .dk-w, #colophon, #colophon::after { animation: none !important; } }