/* Todo el juego queda dentro de .ccg para convivir con el tema de WordPress. */
.ccg{--ccg-ink:#173b45;--ccg-teal:#217f76;--ccg-cream:#fffaf0;--ccg-gold:#ffd464;--ccg-border:#bed8d2;--ccg-paper:#fff;box-sizing:border-box;color:var(--ccg-ink);font-family:var(--wp--preset--font-family--body,Inter,Arial,sans-serif);line-height:1.45;max-width:1200px;margin:auto}
.ccg *{box-sizing:border-box}
.ccg :where(h2,h3,p){margin:0}
.ccg button{font:inherit}
.ccg button:focus-visible{outline:4px solid #ecaa35;outline-offset:3px}
.ccg-wrap{background:#eff8f4;border:1px solid #c7dfd6;box-shadow:0 18px 45px rgba(20,66,62,.12);overflow:hidden}
.ccg-header{align-items:center;background:#123842;color:#fff;display:flex;gap:24px;justify-content:space-between;padding:22px clamp(20px,4vw,44px);position:relative}
.ccg-header::before{background-image:linear-gradient(90deg,transparent 92%,rgba(255,255,255,.12) 92%),linear-gradient(transparent 92%,rgba(255,255,255,.12) 92%);background-size:26px 26px;content:"";inset:0;opacity:.2;pointer-events:none;position:absolute}
.ccg-header__brand{align-items:center;display:flex;gap:17px;position:relative}
.ccg-header__mark{align-items:center;background:var(--ccg-gold);border:5px solid rgba(255,255,255,.18);border-radius:14px;color:#173b45;display:flex;font-size:2rem;height:65px;justify-content:center;transform:rotate(-7deg);width:65px}
.ccg-kicker{color:#79dcc8;font-size:.69rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.ccg-header h2{color:#fff;font-family:var(--wp--preset--font-family--display,Arial,sans-serif);font-size:clamp(1.4rem,3vw,2.25rem);letter-spacing:-.04em;line-height:1.1;margin:.2rem 0 0}
.ccg-notebook{align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:11px;display:flex;gap:11px;padding:9px 13px;position:relative}
.ccg-notebook__caption{font-size:.59rem;font-weight:900;letter-spacing:.1em;line-height:1.15;max-width:52px}
.ccg-notebook__stamps{display:flex;gap:5px}
.ccg-stamp{align-items:center;background:rgba(255,255,255,.13);border:1px dashed rgba(255,255,255,.35);border-radius:50%;color:#aac9c3;display:flex;font-size:1.1rem;height:33px;justify-content:center;width:33px}
.ccg-stamp.is-earned{background:#fff5d2;border:2px solid var(--ccg-gold);color:#123842}
.ccg-notebook small{font-size:.66rem;font-weight:700;max-width:56px}
.ccg-main{padding:clamp(18px,3.2vw,34px)}
.ccg-mission{align-items:start;display:grid;gap:6px 28px;grid-template-columns:1fr auto;margin:0 0 22px}
.ccg-mission__number{align-items:center;color:#168274;display:flex;font-size:.72rem;font-weight:900;gap:8px;grid-column:1/-1;letter-spacing:.1em;text-transform:uppercase}
.ccg-mission__number span{font-size:1.5rem}
.ccg-mission h3{font-family:var(--wp--preset--font-family--display,Arial,sans-serif);font-size:clamp(1.75rem,3vw,2.65rem);grid-column:1;letter-spacing:-.045em;line-height:1.1}
.ccg-mission>p{color:#45646b;font-size:1.02rem;grid-column:1}
.ccg-mission__goal{align-items:center;align-self:end;background:#fff2c7;border:1px solid #efcf66;border-radius:9px;color:#624812;display:flex;font-size:.83rem;gap:7px;grid-column:2;grid-row:2/4;line-height:1.45;max-width:275px;padding:12px 15px}
.ccg-mission__goal span:first-child{font-size:1.3rem;flex:none}
.ccg-mission__goal span:last-child{min-width:0}
.ccg-mission__goal strong{display:inline}
.ccg-lab{align-items:stretch;display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative}
.ccg-bench{background:#fff;border:2px solid #bfd7d2;border-radius:13px;box-shadow:0 8px 20px rgba(16,72,65,.08);min-width:0;overflow:hidden;padding:14px;position:relative}
.ccg-bench--b{border-color:#2f9b89;box-shadow:0 8px 24px rgba(33,127,118,.14)}
.ccg-bench__heading{align-items:center;display:flex;gap:9px;padding:0 0 11px}
.ccg-bench__tag{align-items:center;background:#173b45;border-radius:7px;color:#fff;display:flex;font-size:1rem;font-weight:900;height:31px;justify-content:center;width:31px}
.ccg-bench--b .ccg-bench__tag{background:#218477}
.ccg-bench__heading strong,.ccg-bench__heading small{display:block;line-height:1.2}
.ccg-bench__heading strong{font-size:.91rem}
.ccg-bench__heading small{color:#68827e;font-size:.69rem;margin-top:2px}
.ccg-vs{align-items:center;align-self:center;background:#ffd464;border:3px solid #fff;border-radius:50%;box-shadow:0 4px 11px rgba(0,0,0,.2);color:#173b45;display:flex;font-size:.74rem;font-weight:950;height:44px;justify-content:center;left:50%;position:absolute;transform:translateX(-50%) rotate(-12deg);width:44px;z-index:2}
.ccg-scene{background:#dff4f1;border:1px solid #c8e4df;border-radius:9px;display:flex;flex-direction:column;height:160px;overflow:hidden;position:relative}
.ccg-scene__sky{background:linear-gradient(#b8e8e4,#e7f7f0 75%);flex:1;overflow:hidden;position:relative}
.ccg-scene__sky::after{background:#b7d4c5;bottom:0;content:"";height:12%;left:0;position:absolute;right:0}
.ccg-scene__screen{align-items:center;background:#e9f2ef;color:#426761;display:flex;font-size:.72rem;gap:8px;justify-content:center;min-height:32px;padding:5px 8px;text-align:center}
.ccg-scene__pulse{background:#9cbdb4;border-radius:50%;height:7px;width:7px}
.ccg-scene.is-tested .ccg-scene__pulse{animation:ccg-blink .7s infinite;background:#edac24}
.ccg-scene__screen strong{font-size:.72rem}
.ccg-scene--hielo .ccg-ice{background:linear-gradient(135deg,#fff,#b3e9f4 70%,#8ed5e6);border:3px solid rgba(255,255,255,.85);border-radius:10px;box-shadow:0 7px 0 rgba(62,131,152,.18);height:58px;left:calc(50% - 32px);position:absolute;top:44px;transform:rotate(-8deg);transition:transform 1.45s ease,height 1.45s ease,top 1.45s ease;width:64px;z-index:1}
.ccg-scene--hielo .ccg-puddle{background:#5bbdcf;border-radius:50%;bottom:8px;height:8px;left:calc(50% - 35px);opacity:.35;position:absolute;transition:all 1.45s ease;width:70px;z-index:1}
.ccg-scene--hielo .ccg-sun{color:#e5ae28;font-size:3rem;opacity:.25;position:absolute;right:20px;top:0;transition:opacity .4s;z-index:1}
.ccg-scene--hielo[data-value="calido"] .ccg-sun{opacity:1}
.ccg-scene--hielo.is-tested[data-value="calido"] .ccg-ice{height:25px;top:77px;transform:rotate(-8deg) scale(.58)}
.ccg-scene--hielo.is-tested[data-value="calido"] .ccg-puddle{height:16px;left:calc(50% - 55px);opacity:.8;width:110px}
.ccg-scene--hielo.is-tested[data-value="frio"] .ccg-ice{height:48px;top:53px;transform:rotate(-8deg) scale(.92)}
.ccg-scene--hielo.is-tested[data-value="frio"] .ccg-puddle{height:11px;opacity:.48}
.ccg-scene--coche .ccg-scene__sky{background:linear-gradient(#b8e8e4 70%,#d5dec6 70%)}
.ccg-road{background:#74838a;border-top:5px solid #a1ac9c;bottom:0;height:43px;left:0;position:absolute;right:0}
.ccg-road::after{border-top:2px dashed #fff7d4;content:"";left:0;position:absolute;right:0;top:20px}
.ccg-scene--coche[data-value="rugosa"] .ccg-road{background:repeating-linear-gradient(115deg,#967c61 0 12px,#aa8d71 12px 20px)}
.ccg-car{background:#eb735b;border:2px solid #873e3d;border-radius:10px 12px 5px 5px;bottom:29px;height:27px;left:9%;position:absolute;transition:left 1.5s cubic-bezier(.15,.75,.35,1);width:52px;z-index:2}
.ccg-car::before{background:#a4e4e8;border:2px solid #873e3d;border-bottom:0;border-radius:12px 12px 0 0;content:"";height:13px;left:10px;position:absolute;top:-13px;width:27px}
.ccg-car i{background:#253f47;border:3px solid #e7e6dd;border-radius:50%;bottom:-8px;height:17px;left:5px;position:absolute;width:17px}
.ccg-car i+i{left:32px}
.ccg-flag{bottom:39px;color:#417f72;font-size:1.4rem;position:absolute;right:15%;z-index:1}
.ccg-scene--coche.is-tested[data-value="lisa"] .ccg-car{left:70%}
.ccg-scene--coche.is-tested[data-value="rugosa"] .ccg-car{left:43%}
.ccg-scene--puente .ccg-scene__sky{background:linear-gradient(#bceae1,#e5f8f0)}
.ccg-support{background:#72585b;bottom:9px;height:45px;position:absolute;width:19px;z-index:1}
.ccg-support--left{left:20%}.ccg-support--right{right:20%}
.ccg-bridge{background:#f3d38a;border:3px solid #b99655;border-radius:2px;bottom:49px;height:12px;left:20%;position:absolute;right:20%;transform-origin:center;transition:transform 1.5s ease,bottom 1.5s ease;z-index:2}
.ccg-scene--puente[data-value="plegada"] .ccg-bridge{background:repeating-linear-gradient(110deg,#f7d997 0 10px,#d4a85c 10px 13px);clip-path:polygon(0 30%,10% 0,20% 30%,30% 0,40% 30%,50% 0,60% 30%,70% 0,80% 30%,90% 0,100% 30%,100% 100%,0 100%);height:22px}
.ccg-weight{color:#544751;font-size:27px;left:calc(50% - 12px);position:absolute;top:26px;transition:top 1.5s ease;z-index:3}
.ccg-scene--puente.is-tested[data-value="plana"] .ccg-bridge{bottom:30px;transform:rotate(10deg)}
.ccg-scene--puente.is-tested[data-value="plana"] .ccg-weight{top:49px}
.ccg-scene--puente.is-tested[data-value="plegada"] .ccg-weight{top:38px}
.ccg-bench__slots{display:grid;gap:7px;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:10px}
.ccg-slot{align-items:center;background:#f3f8f5;border:1px solid #d9e7e1;border-radius:7px;color:#284b4b;display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-height:65px;min-width:0;padding:7px 4px;text-align:center}
.ccg-slot small{color:#607d75;display:block;font-size:.66rem;font-weight:850;margin-bottom:4px;text-transform:uppercase}
.ccg-slot span{font-size:.73rem;font-weight:800;overflow-wrap:anywhere}
.ccg-slot--target{background:#fffdfa;border:2px dashed #9bbeb5;cursor:pointer;width:100%}
.ccg-slot--target:hover{background:#e7f6ef;border-color:#288f7f}
.ccg-slot--target.is-filled{background:#ebf8f2;border:2px solid #55a892}
.ccg-slot--target.is-error{background:#fff0e8;border:2px solid #dd785b}
.ccg-palette{background:#fff;border:1px solid #c7ddd5;border-radius:11px;display:grid;gap:15px;grid-template-columns:170px 1fr;margin-top:18px;padding:15px}
.ccg-palette__head{align-content:center;display:grid;gap:4px}
.ccg-palette__head>span{color:#daaa26;font-size:1.6rem;line-height:1}
.ccg-palette__head strong{font-size:.84rem;line-height:1.25}
.ccg-palette__head small{color:#637a75;font-size:.7rem;line-height:1.35}
.ccg-palette__groups{display:grid;gap:11px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ccg-palette__label{color:#4a746e;display:block;font-size:.65rem;font-weight:900;letter-spacing:.08em;margin-bottom:5px;text-transform:uppercase}
.ccg-palette__cards{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ccg-card{align-items:center;background:#f5faf7;border:1px solid #c4d9d0;border-bottom:3px solid #88b8a4;border-radius:6px;color:#244843;cursor:grab;display:flex;flex-direction:column;gap:2px;justify-content:center;line-height:1.15;min-height:61px;padding:5px 3px;text-align:center;touch-action:manipulation;width:100%}
.ccg-card>span{font-family:Arial,sans-serif;font-size:1.35rem;line-height:1.05}
.ccg-card strong{font-size:.67rem}
.ccg-card:hover,.ccg-card.is-selected{background:#fff4ce;border-color:#d2a82e;border-bottom-color:#b27f0b}
.ccg-card.is-selected{box-shadow:0 0 0 2px #ffd464}
.ccg-controls{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-top:16px;min-height:58px}
.ccg-feedback{color:#536f6c;font-size:.84rem;font-weight:700;line-height:1.4;max-width:640px}
.ccg-feedback.is-try{color:#a34930}.ccg-feedback.is-good{color:#166f53}
.ccg-action{align-items:center;background:#f7c94f;border:0;border-bottom:4px solid #be8d18;border-radius:8px;color:#153d3c;cursor:pointer;display:inline-flex;flex:none;font-size:.87rem;font-weight:900;gap:18px;justify-content:center;min-height:48px;padding:10px 18px;transition:transform .15s,background .15s}
.ccg-action:hover{background:#ffe080;transform:translateY(-2px)}
.ccg-action span{font-size:1.2rem}
.ccg-running{align-items:center;color:#176f5f;display:flex;font-size:.88rem;font-weight:850;gap:10px}
.ccg-spinner{border:3px solid #b7dcd2;border-top-color:#157c6d;border-radius:50%;height:20px;width:20px;animation:ccg-spin .7s linear infinite}
.ccg-discovery{align-items:start;background:#dbf1e4;border-left:5px solid #31a271;border-radius:4px;display:flex;gap:12px;margin-top:8px;padding:12px 16px}
.ccg-discovery>span{align-items:center;background:#288c63;border-radius:50%;color:#fff;display:flex;flex:none;font-weight:900;height:25px;justify-content:center;width:25px}
.ccg-discovery strong{color:#146943;font-size:.84rem}
.ccg-discovery p{color:#355c4b;font-size:.79rem;line-height:1.5;margin-top:2px}
.ccg-caveat{color:#728680;font-size:.68rem;line-height:1.4;margin-top:14px!important}
.ccg-final{align-items:center;display:flex;flex-direction:column;min-height:440px;justify-content:center;padding:45px 24px;text-align:center}
.ccg-final__medal{align-items:center;background:#fff4c8;border:5px solid #f2cf57;border-radius:50%;box-shadow:0 11px 27px rgba(188,147,43,.2);display:flex;font-size:4.4rem;height:110px;justify-content:center;margin-bottom:20px;width:110px}
.ccg-final .ccg-kicker{color:#188373}.ccg-final h3{font-family:var(--wp--preset--font-family--display,Arial,sans-serif);font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.04em;margin:7px 0 9px}.ccg-final>p:not(.ccg-kicker){color:#476862;max-width:600px}
.ccg-final__stamps{font-size:2.2rem;margin:20px 0}.ccg-final__stamps span{color:#9cc4b5}
@keyframes ccg-spin{to{transform:rotate(360deg)}}@keyframes ccg-blink{50%{opacity:.3}}
@media(max-width:900px){.ccg-palette{grid-template-columns:1fr}.ccg-palette__head{grid-template-columns:auto 1fr;gap:0 8px}.ccg-palette__head>span{grid-row:1/3}.ccg-palette__head small{grid-column:2}.ccg-mission__goal{grid-column:1;grid-row:auto;max-width:none;margin-top:8px}}
@media(max-width:650px){.ccg-header{align-items:flex-start;flex-direction:column;gap:13px;padding:19px}.ccg-notebook{width:100%;justify-content:flex-start}.ccg-notebook__caption,.ccg-notebook small{max-width:none}.ccg-main{padding:15px}.ccg-mission{gap:6px;margin-bottom:16px}.ccg-mission h3{font-size:1.85rem}.ccg-mission>p{font-size:.93rem}.ccg-lab{gap:10px;grid-template-columns:1fr}.ccg-vs{left:50%;top:calc(50% - 20px)}.ccg-bench{padding:10px}.ccg-scene{height:132px}.ccg-palette__groups{gap:7px}.ccg-palette__cards{grid-template-columns:1fr}.ccg-card{min-height:56px}.ccg-controls{align-items:stretch;flex-direction:column;gap:10px}.ccg-action{width:100%}.ccg-caveat{margin-top:14px!important}}
@media(max-width:390px){.ccg-header__mark{font-size:1.5rem;height:52px;width:52px}.ccg-header h2{font-size:1.4rem}.ccg-palette__groups{grid-template-columns:1fr}.ccg-palette__cards{grid-template-columns:repeat(2,1fr)}.ccg-card{min-height:55px}.ccg-slot span{font-size:.66rem}}
@media(prefers-reduced-motion:reduce){.ccg *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* La maqueta autónoma no afecta a las páginas de WordPress. */
.demo-shell{margin:30px auto;max-width:1190px;padding:0 16px}.demo-note{color:#53756d;font:13px/1.5 Arial,sans-serif;max-width:850px;margin:14px auto}