/* Visuales de "Planes de marketing" (elemento ctd-mkt, mkt.js). Todo bajo .ctdm. */
.ctdm { --m-primary: #1954ED; --m-primary-2: #6E95FF; --m-ink: #0D0D0D; --m-muted: #626E7B; --m-line: #E3E7EE; --m-bg: #F2F4F7; --m-pos: #12A150; --m-warm: #FF7A1A;
	font-family: "DM Sans", system-ui, sans-serif; color: var(--m-ink); width: 100%; }
.ctdm *, .ctdm *::before, .ctdm *::after { box-sizing: border-box; }
.ctdm h4 { margin: 0 0 18px; font-size: 18px; font-weight: 700; letter-spacing: -.3px; }

/* Slider común */
.ctdm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--m-warm) 0 var(--v, 20%), var(--m-primary) var(--v, 20%) 100%); outline: none; cursor: pointer; margin: 14px 0; }
.ctdm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--m-ink); box-shadow: 0 6px 16px rgba(13,30,80,.25); transition: transform .2s; }
.ctdm-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--m-ink); }
.ctdm-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ctdm-note { margin: 14px 0 0; font-size: 13px; color: var(--m-muted); }

/* 1. Calendario */
.ctdm--calendar { position: relative; }
.ctdm-cal { width: 100%; max-width: 460px; display: block; margin: 0 auto; overflow: visible; }
.ctdm-cal-ring { transform-origin: 210px 210px; }
.ctdm-cal-seg { fill: var(--m-primary); fill-opacity: var(--o); transform-origin: 210px 210px; transform: scale(.55); opacity: 0; transition: transform .9s cubic-bezier(.2,.9,.25,1.15), opacity .6s; transition-delay: calc(var(--i) * 70ms); }
.ctdm-cal-seg:hover { fill: var(--m-warm); fill-opacity: 1; }
.ctdm-cal-dot { fill: var(--m-warm); stroke: #fff; stroke-width: 2.5; opacity: 0; transition: opacity .4s; transition-delay: calc(900ms + var(--i) * 70ms); cursor: help; }
.ctdm-cal-m { font-size: 13px; font-weight: 600; fill: var(--m-muted); text-anchor: middle; }
.ctdm-cal-core { fill: #fff; filter: drop-shadow(0 10px 24px rgba(13,30,80,.14)); }
.ctdm-cal-c1 { font-size: 22px; font-weight: 700; text-anchor: middle; fill: var(--m-ink); }
.ctdm-cal-c2 { font-size: 15px; text-anchor: middle; fill: var(--m-primary); font-weight: 600; }
.ctdm-cal-hand { stroke: var(--m-ink); stroke-width: 2; stroke-linecap: round; opacity: .18; transform-origin: 210px 210px; }
.ctdm--calendar.is-in .ctdm-cal-seg { transform: none; opacity: 1; }
.ctdm--calendar.is-in .ctdm-cal-dot { opacity: 1; }
.ctdm--calendar.is-in .ctdm-cal-hand { animation: ctdm-sweep 14s linear infinite; }
.ctdm--calendar.is-in .ctdm-cal-dot { animation: ctdm-pulse 2.4s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * 200ms); }
@keyframes ctdm-sweep { to { transform: rotate(360deg); } }
@keyframes ctdm-pulse { 50% { r: 7; } }
.ctdm-cal-list { list-style: none; margin: 18px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
.ctdm-cal-list li { font-size: 13px; padding: 6px 12px; border-radius: 30px; background: #fff; border: 1px solid var(--m-line); color: var(--m-muted); opacity: 0; transform: translateY(8px); transition: .5s; transition-delay: calc(1.2s + var(--n) * 90ms); }
.ctdm-cal-list li b { color: var(--m-warm); font-weight: 700; margin-right: 4px; }
.ctdm--calendar.is-in .ctdm-cal-list li { opacity: 1; transform: none; }

/* 2. Branding ↔ performance */
.ctdm--mix { background: #fff; border-radius: 22px; padding: 32px; box-shadow: 0 30px 70px -40px rgba(13,30,80,.45), 0 0 0 1px rgba(13,30,80,.05); }
.ctdm-mix-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.ctdm-mix-lab { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--m-muted); font-weight: 600; }
.ctdm-mix-share { display: flex; gap: 18px; font-size: 15px; font-weight: 600; }
.ctdm-mix-share i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ctdm-mix-share .b i { background: var(--m-warm); } .ctdm-mix-share .p i { background: var(--m-primary); }
.ctdm-mix-share b { font-variant-numeric: tabular-nums; }
.ctdm-mix-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; margin-top: 10px; }
.ctdm-funnel { width: 100%; height: auto; overflow: visible; }
.ctdm-fs { transition: d .45s cubic-bezier(.3,.8,.3,1); }
.ctdm-fs0 { fill: #FFB27A; } .ctdm-fs1 { fill: #9DB7FF; } .ctdm-fs2 { fill: #5C86F5; } .ctdm-fs3 { fill: var(--m-primary); }
.ctdm-fl { font-size: 15px; font-weight: 700; text-anchor: middle; fill: #fff; paint-order: stroke; stroke: rgba(13,30,80,.18); stroke-width: 3px; }
.ctdm-kpis { display: grid; gap: 16px; }
.ctdm-kpi { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.ctdm-kpi span { font-size: 14px; color: var(--m-muted); font-weight: 600; }
.ctdm-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.ctdm-bar { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: var(--m-bg); overflow: hidden; }
.ctdm-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--m-primary-2), var(--m-primary)); transition: width .45s cubic-bezier(.3,.8,.3,1); }
.ctdm-kpi:nth-child(-n+2) .ctdm-bar i { background: linear-gradient(90deg, #FFB27A, var(--m-warm)); }
.ctdm-msg { margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--m-bg); font-size: 16px; font-weight: 600; transition: background .3s, color .3s; }
.ctdm--mix.is-brand .ctdm-msg { background: #FFF1E6; color: #B4500C; }
.ctdm--mix.is-perf .ctdm-msg { background: #EAF0FF; color: var(--m-primary); }
.ctdm--mix { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.ctdm--mix.is-in { opacity: 1; transform: none; }

/* 3. ROAS */
.ctdm--roas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ctdm-roas-chart, .ctdm-sim { background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 30px 70px -40px rgba(13,30,80,.45), 0 0 0 1px rgba(13,30,80,.05); }
.ctdm-rrow { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 12px; margin: 12px 0; font-size: 14px; }
.ctdm-rrow span { color: var(--m-muted); font-weight: 600; }
.ctdm-rrow b { text-align: right; font-variant-numeric: tabular-nums; }
.ctdm-rbar { height: 14px; border-radius: 8px; background: var(--m-bg); overflow: hidden; }
.ctdm-rbar i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: linear-gradient(90deg, var(--m-primary-2), var(--m-primary)); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 110ms); }
.ctdm--roas.is-in .ctdm-rbar i { transform: none; }
.ctdm-sim-row label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--m-muted); }
.ctdm-sim-row label b { color: var(--m-ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.ctdm-sim .ctdm-range { background: linear-gradient(90deg, var(--m-pos) 0 var(--v, 0%), var(--m-bg) var(--v, 0%) 100%); }
.ctdm-sim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.ctdm-sim-grid div { background: var(--m-bg); border-radius: 12px; padding: 12px; }
.ctdm-sim-grid span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--m-muted); }
.ctdm-sim-grid b { display: block; margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctdm-sim-grid .big { background: var(--m-primary); color: #fff; } .ctdm-sim-grid .big span { color: rgba(255,255,255,.8); }
.ctdm-sim-tag { margin: 16px 0 0; font-size: 16px; font-weight: 600; }
.ctdm-sim-tag b { color: var(--m-pos); font-size: 20px; }


/* 4. Puzle */
.ctdm--puzzle { position: relative; }
.ctdm-pz { width: 100%; max-width: 560px; display: block; margin: 0 auto; overflow: visible; }
.ctdm-pz path { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.ctdm-pz-p path { fill: #E4E9F2; } .ctdm-pz-t1 path { fill: #DCE3EE; } .ctdm-pz-t2 path { fill: #EBEFF6; }
.ctdm-pz-p text { font-size: 14px; font-weight: 600; fill: #7A8494; text-anchor: middle; }
.ctdm-pz-p { opacity: 0; transition: opacity .6s; transition-delay: calc(var(--i) * 90ms); }
.ctdm-pz-ours path { fill: url(#none); fill: var(--m-primary); filter: drop-shadow(0 18px 24px rgba(25,84,237,.45)); }
.ctdm-pz-ours text { font-size: 19px; font-weight: 700; fill: #fff; text-anchor: middle; }
.ctdm-pz-ours text.sub { font-size: 11px; font-weight: 600; fill: rgba(255,255,255,.8); letter-spacing: .04em; }
.ctdm-pz-ours { transform: translate(190px, -150px) rotate(-14deg); transform-origin: 265px 115px; transform-box: view-box; opacity: 0; transition: transform 1.2s cubic-bezier(.25,1.25,.35,1) .7s, opacity .4s .6s; }
.ctdm--puzzle.is-in .ctdm-pz-p { opacity: 1; }
.ctdm--puzzle.is-in .ctdm-pz-ours { transform: none; opacity: 1; }
.ctdm--puzzle.is-in .ctdm-pz-ours path { animation: ctdm-click .6s ease-out 1.9s; }
@keyframes ctdm-click { 50% { filter: drop-shadow(0 0 0 rgba(25,84,237,.0)) drop-shadow(0 0 22px rgba(79,125,255,.9)); } }
.ctdm-pz-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ctdm-pz-tags span { padding: 8px 16px; border-radius: 30px; background: #fff; border: 1px solid var(--m-line); font-size: 14px; font-weight: 600; color: var(--m-primary); opacity: 0; transform: translateY(8px); transition: .5s; transition-delay: calc(2.1s + var(--n) * 120ms); }
.ctdm--puzzle.is-in .ctdm-pz-tags span { opacity: 1; transform: none; }

/* 5. Plataformas */
.ctdm--stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ctdm-tech { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px -22px rgba(13,30,80,.35), 0 0 0 1px rgba(13,30,80,.05); text-align: center; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s, transform .6s, box-shadow .3s; transition-delay: calc(var(--i) * 90ms); }
.ctdm-tech:hover { box-shadow: 0 22px 44px -22px rgba(13,30,80,.45), 0 0 0 1px rgba(25,84,237,.25); }
.ctdm-tech img { width: 48px; height: 48px; object-fit: contain; }
.ctdm-tech img[src*="woocommerce"] { width: 110px; height: 34px; }
.ctdm-tech span { font-size: 15px; font-weight: 700; }
.ctdm-tech.is-main { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, #F3FAEE, #fff 60%); box-shadow: 0 24px 50px -24px rgba(122,181,92,.6), 0 0 0 2px rgba(122,181,92,.35); }
.ctdm-tech.is-main img { width: 96px; height: 96px; }
.ctdm-tech.is-main span { font-size: 26px; }
.ctdm-tech em { position: absolute; top: 16px; right: 16px; font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 30px; background: #7AB55C; color: #fff; }
.ctdm-tech.is-custom { grid-column: span 3; background: var(--m-ink); color: #fff; }
.ctdm-tech.is-custom i { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 700; color: var(--m-primary-2); }
.ctdm-tech.is-custom small { font-size: 13px; color: rgba(255,255,255,.7); }
.ctdm--stack.is-in .ctdm-tech { opacity: 1; transform: none; }

/* 6. Dedicación */
.ctdm--hours { background: #fff; border-radius: 22px; padding: 32px; box-shadow: 0 30px 70px -40px rgba(13,30,80,.45), 0 0 0 1px rgba(13,30,80,.05); }
.ctdm-h-ctrl label { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--m-muted); }
.ctdm-h-ctrl label b { color: var(--m-ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.ctdm--hours .ctdm-range { background: linear-gradient(90deg, var(--m-primary) 0 var(--v, 0%), var(--m-bg) var(--v, 0%) 100%); }
.ctdm-h-season { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 22px; }
.ctdm-h-season span { font-size: 14px; color: var(--m-muted); font-weight: 600; margin-right: 6px; }
.ctdm-h-season button { padding: 9px 16px; border-radius: 30px; border: 1px solid var(--m-line); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--m-ink); cursor: pointer; transition: .2s; }
.ctdm-h-season button.is-on { background: var(--m-ink); border-color: var(--m-ink); color: #fff; }
.ctdm--hours.is-peak .ctdm-h-season button.is-on { background: var(--m-warm); border-color: var(--m-warm); }
.ctdm-h-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; border-radius: 14px; background: var(--m-bg); }
.ctdm-h-meter span { font-size: 14px; font-weight: 600; color: var(--m-muted); }
.ctdm-h-meter b { font-size: 18px; min-width: 70px; text-align: right; }
.ctdm-h-track { height: 14px; border-radius: 10px; background: #fff; overflow: hidden; }
.ctdm-h-track i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--m-primary-2), var(--m-primary)); transition: width .5s cubic-bezier(.3,.8,.3,1), background .3s; }
.ctdm--hours.is-peak .ctdm-h-track i { background: linear-gradient(90deg, #FFB27A, var(--m-warm)); }
.ctdm-h-tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 20px; }
.ctdm-h-tasks span { display: block; font-size: 14px; font-weight: 600; color: var(--m-muted); margin-bottom: 6px; }
.ctdm--hours { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.ctdm--hours.is-in { opacity: 1; transform: none; }
@media (max-width: 991px) { .ctdm--stack { grid-template-columns: repeat(2, 1fr); } .ctdm-tech.is-main, .ctdm-tech.is-custom { grid-column: span 3; } .ctdm-tech.is-main { grid-row: auto; } }
@media (max-width: 600px) { .ctdm--hours { padding: 22px 18px; } .ctdm-h-tasks { grid-template-columns: 1fr; } .ctdm-h-meter { grid-template-columns: 1fr auto; } .ctdm-h-meter .ctdm-h-track { grid-column: 1 / -1; grid-row: 2; } }

@media (max-width: 991px) {
	.ctdm-mix-body, .ctdm--roas { grid-template-columns: 1fr; }
	.ctdm-sim-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.ctdm--mix, .ctdm-roas-chart, .ctdm-sim { padding: 22px 18px; }
	.ctdm-rrow { grid-template-columns: 96px 1fr 48px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.ctdm *, .ctdm { transition: none !important; animation: none !important; }
}