/* GRCthon Inclusivo 10 — lenguaje visual «Cuaderno de auditoría».
   Diseño editorial basado en tipografía, expediente, contraste y verificación.
   Sin ilustraciones ni librerías externas. */
:root{--navy:#032f4e;--deep:#032238;--blue:#006b92;--mint:#00ac94;--paper:#fff;--canvas:#f5f8f8;--stroke:#cddfe3;--text:#0a354e;--soft:#f4f8f9}
body{background:#eaf1f3;color:var(--navy)}
.masthead{height:82px;border-bottom:3px solid #00a991;box-shadow:none;padding:10px clamp(18px,3vw,52px)}
.brandlock img{max-height:62px}
.top-control{border-radius:7px;background:#f8fafb;border-color:#cbdfe4;color:#063750}
.top-control:hover{background:#eaf6f4}
.bottom-bar{background:#f3f7f8;border-top:1px solid #cedfe4;color:#4c6776}
.panel{max-width:1740px}
.btn{border-radius:8px;box-shadow:none!important;transition:background-color .14s,transform .14s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn.primary{background:#00ad96;color:#003f3b}
.btn.primary:hover{background:#37d2b4}
.btn.subtle{background:#fff;border-color:#bfd4da}
button:focus-visible,input:focus-visible{outline:3px solid #db8a26;outline-offset:3px}

/* Portada dividida en dos planos: mensaje y caso real. */
.welcome{
  background:#032e4a;border-radius:0 0 16px 16px;
  min-height:calc(100dvh - 135px);
  padding:clamp(28px,3.8vw,66px) clamp(25px,4.4vw,76px);
  gap:clamp(25px,4vw,75px);overflow:visible;
  position:relative;
}
.welcome:before{content:'';position:absolute;top:0;left:clamp(25px,4.4vw,76px);height:5px;width:clamp(90px,12vw,190px);background:#00b69c}
.welcome-copy{width:54%;max-width:790px}
.welcome-mark{display:inline-flex;align-items:center;gap:12px;border:1px solid #4d8390;color:#d2ece8;padding:6px 11px;font-size:.82rem;font-weight:750;margin-bottom:24px;letter-spacing:.04em}
.welcome-mark-index{background:#00b69c;color:#002e3c;margin:-6px 0 -6px -11px;padding:9px 13px;font-family:Consolas,"Courier New",monospace;font-weight:900}
.welcome .eyebrow{color:#a9d6da;font-size:.75rem;letter-spacing:.10em;margin-bottom:20px}
.welcome h1{font-size:clamp(3.7rem,5.2vw,6.2rem);font-weight:850;line-height:1.01;letter-spacing:-.067em;margin-bottom:8px}
.welcome h1 em{color:#55dfc7;font-style:normal}
.welcome .subhero{color:#fff;font-size:clamp(1.9rem,2.65vw,2.9rem);font-weight:650;margin-bottom:22px;letter-spacing:-.03em}
.welcome-desc{font-size:clamp(1.10rem,1.42vw,1.34rem);max-width:665px;line-height:1.53;color:#e0eaee}
.welcome-actions{margin-top:31px;gap:12px}
.welcome .btn.big{font-size:1.30rem;padding:18px 26px;min-height:67px;gap:30px}
.welcome .micro{font-size:.91rem;color:#b7d7df}
.welcome-encouragement{color:#b8d6d8;font-size:.94rem;margin-top:23px;line-height:1.4}
.welcome-journey{
  width:46%;max-width:590px;border:1px solid #ccdedf;border-radius:9px;
  background:#f9fbfa;color:#063750;box-shadow:12px 12px 0 rgba(0,14,28,.19);
  padding:clamp(20px,2.4vw,36px);
  display:flex;flex-direction:column;justify-content:center
}
.journey-heading{margin-bottom:17px;gap:10px}
.journey-heading>span{font-family:Consolas,"Courier New",monospace;font-size:.83rem;letter-spacing:.045em;color:#006f69;font-weight:850}
.journey-heading>strong{font-size:clamp(1.4rem,1.72vw,1.9rem);letter-spacing:-.025em;line-height:1.22;color:#042f4d}
.teaser-question{border:0;border-left:4px solid #00ad96;background:#e9f2f3;border-radius:0;padding:17px 18px;font-size:clamp(1.12rem,1.3vw,1.33rem);font-weight:750;line-height:1.45;margin:0 0 15px}
.teaser-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.teaser-choices button{display:flex;align-items:center;justify-content:space-between;text-align:left;min-height:86px;border:1.5px solid #b4ced5;border-radius:6px;background:#fff;color:#052f4a;font-size:clamp(.96rem,1.12vw,1.14rem);font-weight:720;gap:10px;padding:14px 15px}
.teaser-choices button span{font-size:1.5rem;color:#007969}
.teaser-choices button:hover,.teaser-choices button.chosen{border-color:#008d7e;background:#e4f6f0;box-shadow:inset 0 0 0 1px #008d7e}
.teaser-feedback{border-left:3px solid #7eaeb3;background:#eff5f5;padding:13px 15px;min-height:72px;line-height:1.45;margin:14px 0 0;color:#496675;font-size:.96rem}
.teaser-feedback.is-active{border-color:#00a992;background:#e6f6f1;color:#074e47}
.teaser-start{width:100%;min-height:54px;margin-top:10px;display:flex}
.teaser-roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:19px;padding-top:15px;border-top:1px solid #cbdee2}
.teaser-roadmap span{font-size:.77rem;text-align:center;color:#345d6c;font-weight:700;line-height:1.3}
.teaser-roadmap span b{display:block;color:#007b70;font-family:Consolas,"Courier New",monospace;font-size:1.03rem;margin-bottom:4px}

/* Juego: paneles diseñados como pasos de un expediente, no tarjetas promocionales. */
.play{padding:clamp(22px,2.2vw,36px) clamp(22px,3.6vw,58px) 25px;background:#f8faf9;border-radius:0 0 16px 16px}
.play-heading h2{font-size:clamp(2.1rem,2.75vw,3.05rem);margin-bottom:7px;letter-spacing:-.047em}
.eyebrow.dark{font-family:Consolas,"Courier New",monospace;font-size:.80rem;color:#007d74;letter-spacing:.1em;margin-bottom:8px}
.intro-text{max-width:1250px;font-size:clamp(1rem,1.3vw,1.29rem);color:#4f6978}
.score-box{border:1px solid #b9d2d7;border-radius:7px;padding:10px 17px;min-width:143px;box-shadow:none}
.score-box span{color:#496b7a;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.score-box strong{font-family:Consolas,"Courier New",monospace;font-weight:900;font-size:2.6rem;letter-spacing:-.08em}
.score-box small{font-size:.85rem;color:#55717d}
.mission-track{gap:9px;margin-top:15px}
.track-stop{border-radius:5px;min-height:53px;background:#fff;color:#486978;font-weight:680;border:1px solid #c5d8df;font-size:1.03rem}
.track-symbol{font-family:Consolas,"Courier New",monospace;border-radius:3px!important;font-weight:800;background:#e7f1f3!important;color:#315c6e!important}
.track-stop.is-current{border-color:#008f80;background:#e6f7f1;box-shadow:none;color:#00594d}
.track-stop.is-current .track-symbol{background:#00ad96!important;color:#003831!important}
.track-stop.is-done{border-color:#83c9b4;background:#edf8f3}
.track-stop.is-done .track-symbol{background:#007d68!important;color:#fff!important}
.progress{height:5px;background:#d7e7e9;border-radius:0;margin:11px 0 15px}
.progress span{background:#00a58e;border-radius:0}
.story-context{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;align-items:center;margin:0 0 16px;border-bottom:1px solid #d7e6e8;padding-bottom:11px;font-size:.83rem;line-height:1.4}
.story-context .story-label{font-family:Consolas,"Courier New",monospace;font-weight:800;color:#006a66!important;letter-spacing:.03em;padding:0}
.story-context .story-copy{font-weight:630;color:#547484!important;padding:0}
.game-content{min-height:0;position:relative}
.scene-title{font-size:clamp(1.08rem,1.36vw,1.34rem);color:#06384e;margin-bottom:16px}
.risk-grid{gap:12px}
.risk-card{border:1.5px solid #c9dce2;background:#fff;box-shadow:none;min-height:139px;border-radius:7px;padding:15px 13px;gap:11px}
.risk-card .item-icon{border-radius:4px;background:#dff3ef;color:#007788;width:61px;height:62px;min-width:61px;font-size:2.75rem;line-height:1}
.risk-card .risk-label{font-size:clamp(1.02rem,1.15vw,1.25rem)}
.risk-card:hover{border-color:#008f87;box-shadow:0 0 0 1px #008f87}
.risk-card.found{background:#e8f7f0;border-color:#009c83}
.risk-card.safe-choice{background:#edf4f7;border-color:#7db0c1}
.sort-grid{gap:14px}
.task-column,.drop-column{border-radius:7px;background:#fff;border:1px solid #c9dee3;box-shadow:none;min-height:330px;padding:19px 21px}
.column-label{font-family:Consolas,"Courier New",monospace;letter-spacing:.03em;font-size:.83rem;color:#4d6d7b;margin-bottom:15px}
.file-piece{border-radius:5px;background:#f4f9fa;border:1.5px solid #bdd5df;min-height:72px;font-size:1.10rem;padding:11px 14px}
.file-piece:before{font-size:1.55rem;color:#007c82}
.file-piece:hover{box-shadow:none;border-color:#008d80}
.drop-zones{gap:10px}
.dropzone{min-height:225px;border-radius:6px;background:#f7fbfa;border:1.5px dashed #89b5c3}
.dropzone .folder{color:#008079;font-size:3.05rem}
.dropzone b{font-size:1.15rem;color:#0d4057}
.dropzone .drop-result{font-size:.94rem}
.decision-prompt{border-radius:7px;background:#053b5b;padding:23px 27px;box-shadow:none}
.decision-prompt h3{font-size:clamp(1.28rem,1.8vw,1.83rem);line-height:1.4}
.decision-options{margin-top:13px;gap:12px}
.decision-option{min-height:157px;padding:18px 16px;border:1.5px solid #c3d9df;border-radius:7px;font-size:clamp(.98rem,1.10vw,1.16rem);line-height:1.45;box-shadow:none}
.decision-option:hover{box-shadow:none;border-color:#00a68e}
.decision-option .choice-number{border-radius:4px;width:37px;min-width:37px;height:37px;background:#d9f1ec;color:#00655b}
.prisma-layout{gap:14px}
.prisma-panel{min-height:348px;background:#063a57;border-radius:7px;padding:22px 25px;box-shadow:none}
.prisma-question h3{font-size:clamp(1.25rem,1.54vw,1.66rem)}
.scanner{border-radius:5px;background:#0a5570;border:1.5px dashed #5acbbb;min-height:132px}
.scanner-beam{opacity:.40}
.scanner-center .scanner-glyph{font-size:2rem}
.evidence-options{border-radius:7px;background:#fff;border:1px solid #c6dce2;padding:16px;gap:11px}
.evidence-card{border:1.5px solid #c7dce3;border-radius:5px;background:#f7faf9;min-height:89px;padding:11px 13px;gap:14px;box-shadow:none}
.evidence-card:hover{box-shadow:none;transform:none;border-color:#00a68e}
.evidence-number{border-radius:4px;background:#084762;min-width:48px;height:49px;font-size:1.04rem}
.evidence-main strong{font-size:1.13rem}
.evidence-main small{font-size:.94rem}
.mission-unlocked{background:#e9f7f0;border-left:5px solid #008b71;border-radius:3px;border-top:1px solid #afd9c9;border-right:1px solid #afd9c9;border-bottom:1px solid #afd9c9;animation:stamp-in .26s ease-out;min-height:76px;padding:10px 13px}
.unlock-emblem{font-family:Consolas,"Courier New",monospace;font-size:1.08rem;font-weight:900;letter-spacing:-.05em;border:2px solid #007a6a;border-radius:50%;background:transparent!important;color:#007a6a!important;min-width:49px;height:49px;display:grid;place-items:center;transform:rotate(-9deg)}
.mission-unlocked strong{font-size:1.03rem;color:#00574e}
.mission-unlocked p{font-size:.90rem;margin:4px 0 0}
.unlock-points{font-family:Consolas,"Courier New",monospace;letter-spacing:.01em;font-size:.74rem;color:#007361}
.mission-bottom{margin-top:16px;min-height:71px;gap:11px}
.feedback{font-weight:650;font-size:clamp(.96rem,1.09vw,1.13rem);line-height:1.43;background:#e8f1f2;border-left:4px solid #008e7a;border-radius:3px;padding:13px 16px;min-height:65px}
.feedback[data-tone="learn"]{border-color:#006d93;background:#edf4f7;color:#184c65}
.feedback[data-tone="success"]{border-color:#00a78e;background:#e7f7ef;color:#06574d}
.mission-actions{gap:8px}
.mission-actions .btn{min-height:50px;border-radius:6px;font-size:.95rem;padding:11px 14px}
.interlude,.prisma-next{min-height:53px;border-radius:5px;margin-top:14px}
@keyframes stamp-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* Resultado: una ficha de misión real, no una insignia fantasiosa. */
.finale{border-radius:0 0 16px 16px;background:#f7faf9;padding:clamp(22px,2.3vw,34px) clamp(22px,3.5vw,58px) 28px}
.finale-head h2{font-size:clamp(2rem,2.7vw,2.85rem);margin-bottom:8px;color:#06384f}
.finale-head p{font-size:1.07rem;margin-bottom:19px;color:#4e6a78}
.finale-layout{grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);gap:17px;align-items:stretch}
.reward-card{border-radius:7px;border:1px solid #94b7ba;background:#063651;color:#fff;box-shadow:none;justify-content:flex-start;padding:0;min-height:0;overflow:hidden;align-items:stretch;text-align:left}
.dossier-top{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #4b8290;padding:14px 20px;font-family:Consolas,"Courier New",monospace;letter-spacing:.04em;font-size:.79rem;color:#c8e7e5;font-weight:740}
.dossier-id{color:#60e3c7;font-size:1rem}
.dossier-body{position:relative;padding:21px 22px 15px}
.reward-overline{font-family:Consolas,"Courier New",monospace;color:#8de9d4;font-size:.71rem;letter-spacing:.06em;line-height:1.4;display:block;padding-right:99px}
.big-badge{position:absolute;right:20px;top:19px;margin:0;display:flex;flex-direction:column;justify-content:center;gap:0;width:84px;height:84px;border:3px double #57dbbf;border-radius:50%;color:#7ce6d0;background:transparent;font-family:Consolas,"Courier New",monospace;font-size:1.6rem;font-weight:900;transform:rotate(-10deg)}
.big-badge small{font-size:.77rem;border-top:1px solid #57dbbf;line-height:1;padding-top:3px}
.award-name{font-size:clamp(1.42rem,1.8vw,1.95rem);letter-spacing:-.035em;color:#fff;display:block;margin:11px 94px 10px 0;line-height:1.15}
.award-subline{font-size:.99rem;line-height:1.42;color:#d6e9ed;display:block;margin:0 0 14px}
.final-score{font-family:Consolas,"Courier New",monospace;border-top:1px solid #4a8190;padding-top:8px;font-size:2.35rem;line-height:1.05}
.final-score small{font-family:"Segoe UI",Arial,sans-serif;font-size:.88rem;color:#b9dce2}
.reward-card .score-context{margin:7px 0 0;font-size:.79rem;color:#c5dce3;line-height:1.42}
.favorite-box{background:#092f47;border-top:1px solid #3b7381;padding:15px 20px 18px;display:block}
.favorite-box h3{font-size:1.0rem;margin-bottom:3px;color:#fff}
.favorite-box>p{font-size:.83rem;line-height:1.4;color:#b5d7dc;margin-bottom:9px}
.favorite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.favorite-grid button{min-height:40px;padding:8px 10px;background:#103e57;color:#e1f2f1;border:1px solid #477e8b;text-align:left;border-radius:4px;font-size:.84rem;font-weight:730}
.favorite-grid button:hover,.favorite-grid button.is-favorite{background:#dcf5ec;color:#03463d;border-color:#64d6b8}
.favorite-box #favorite-description{color:#c1e4e2;font-size:.81rem;line-height:1.44;margin-top:10px}
.signup-card{background:#fff;border:1px solid #c7dadd;border-radius:7px;box-shadow:none;padding:clamp(18px,2.2vw,29px)}
.label-pill{border-radius:3px;background:#e2f4ee;color:#006c60;font-family:Consolas,"Courier New",monospace;letter-spacing:.03em;font-size:.76rem}
.signup-header h3{font-size:clamp(1.45rem,1.75vw,1.9rem);color:#07384f;margin-bottom:9px}
.signup-header p{font-size:.94rem;line-height:1.47;color:#486875;margin-bottom:11px}
.signup-card .signup-reassurance{font-size:.94rem;line-height:1.47;color:#2b5867}
.field label{font-size:.88rem;color:#21495a}
.field input{height:50px;min-height:50px;border-radius:5px;background:#fdfefe;border:1.5px solid #aecbd3}
.privacy-short{border:1px solid #d6e4e7;background:#f5f8f8;border-radius:5px;color:#456574;padding:11px 13px}
.consent-line{color:#294c5b;line-height:1.45}
.signup-actions{align-items:center;gap:8px}
.signup-actions .btn{border-radius:5px}
.ending{background:#053651;border-radius:0 0 16px 16px}
.ending-symbol{border-radius:7px;background:#00ad96;color:#04413c}
/* No lluvia de confeti ni decoraciones aleatorias: el logro se comunica con la interfaz. */
.confetti{display:none!important}

@media(max-width:1199px){
 .welcome{gap:22px;padding:28px 30px}
 .welcome-copy{width:52%}.welcome-journey{width:48%;padding:22px}
 .welcome h1{font-size:clamp(3.1rem,5.15vw,5rem)}
 .teaser-choices{grid-template-columns:1fr}.teaser-choices button{min-height:62px;padding:10px 13px}
 .teaser-roadmap{grid-template-columns:repeat(4,1fr)}
 .play{padding:22px 28px}
 .finale-layout{grid-template-columns:.92fr 1.08fr}
}
@media(min-width:1100px) and (max-height:850px){
 .welcome{padding-top:25px;padding-bottom:25px;min-height:0}
 .welcome-mark{margin-bottom:14px}.welcome .eyebrow{margin-bottom:11px}.welcome h1{font-size:4.0rem}
 .welcome .subhero{margin-bottom:9px}.welcome-desc{font-size:1.06rem}.welcome-actions{margin-top:14px}
 .welcome-encouragement{margin-top:12px}
 .journey-heading{margin-bottom:9px}.teaser-question{padding:12px;margin-bottom:10px}
 .teaser-feedback{padding:9px 12px;min-height:53px}.teaser-roadmap{margin-top:10px;padding-top:10px}
 .play-heading h2{font-size:2.15rem}.risk-card{min-height:116px}.risk-card .item-icon{height:45px;min-width:45px;width:45px;font-size:2.1rem}
 .decision-option{min-height:108px}.dropzone{min-height:155px}.task-column,.drop-column{min-height:240px}
 .prisma-panel{min-height:240px}.evidence-card{min-height:67px}.scanner{min-height:95px}
 .mission-unlocked{min-height:60px}.mission-bottom{margin-top:10px}
 .finale{padding:17px 28px 20px}.finale-head p{margin-bottom:11px;font-size:.93rem}
 .dossier-body{padding:13px 18px}.dossier-top{padding:9px 18px}.favorite-box{padding:10px 18px}
 .signup-card{padding:18px}.signup-header p{margin-bottom:7px}.field input{height:42px;min-height:42px}
 .privacy-short{padding:9px}.signup-actions .btn{min-height:43px}
}
@media(max-width:850px){
 .welcome{flex-direction:column;align-items:stretch;min-height:0;padding:30px 22px;gap:26px}
 .welcome-copy,.welcome-journey{width:100%;max-width:none}
 .welcome h1{font-size:clamp(3.3rem,8vw,5rem)}
 .teaser-choices{grid-template-columns:1fr 1fr}
 .finale-layout{grid-template-columns:1fr}
 .sort-grid,.prisma-layout{grid-template-columns:1fr}
 .mission-bottom{flex-direction:column;align-items:stretch}
 .mission-actions{justify-content:flex-start;max-width:none}
 .feedback{max-width:none}
}
@media(max-width:620px){
 .masthead{height:69px}.brandlock img{width:170px}
 .welcome{padding:28px 17px}.welcome-mark{font-size:.74rem}
 .welcome .eyebrow{font-size:.67rem}.welcome h1{font-size:clamp(3.2rem,10vw,4.5rem)}
 .welcome .subhero{font-size:2rem}.welcome-desc{font-size:1rem}
 .welcome-journey{padding:17px}.teaser-choices{grid-template-columns:1fr}
 .teaser-roadmap{grid-template-columns:repeat(2,1fr)}
 .play{padding:18px 14px}
 .score-box{min-width:95px;padding:8px}.score-box strong{font-size:1.8rem}
 .track-stop{flex-direction:column;gap:4px;min-height:62px;font-size:.68rem;padding:6px 3px;text-align:center}
 .track-symbol{width:26px;height:25px;font-size:.80rem}
 .story-context{gap:3px;font-size:.70rem}
 .risk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .risk-card{min-height:124px;padding:9px}.risk-card .item-icon{height:43px;min-width:43px;width:43px;font-size:2rem}
 .risk-card .risk-label{font-size:.89rem}
 .decision-options{grid-template-columns:1fr}
 .decision-option{min-height:76px}
 .drop-zones{grid-template-columns:1fr}.dropzone{min-height:90px}
 .mission-actions .btn{flex:1 1 auto}
 .mission-unlocked{gap:8px}.unlock-points{display:none}
 .finale{padding:17px 13px}.big-badge{width:67px;height:67px;font-size:1.32rem;right:14px}
 .award-name{margin-right:75px}.favorite-grid button{font-size:.86rem}
 .signup-card{padding:17px}.field-pair{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Ajustes finales de composición y cuaderno de campo */
.welcome-mark{display:flex;width:max-content;max-width:100%}
.welcome .eyebrow{display:block;max-width:620px;line-height:1.4}
.dossier-areas{margin-top:3px;border-top:1px solid #477f88;border-bottom:1px solid #477f88;padding:16px 20px;background:#08364f}
.dossier-areas>strong{display:block;color:#a6d9dc;font-family:Consolas,"Courier New",monospace;font-size:.70rem;letter-spacing:.06em;font-weight:700;margin-bottom:12px}
.dossier-areas>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.dossier-areas span{font-size:.85rem;color:#ebf7f5;line-height:1.34;white-space:nowrap}
.dossier-areas b{font-family:Consolas,"Courier New",monospace;color:#70e2cc;margin-right:6px;font-size:.84rem}
.reward-card.is-confirmed .big-badge{animation:stamp-seal .5s ease-out}
@keyframes stamp-seal{0%{opacity:.4;transform:scale(1.25) rotate(-3deg)}75%{transform:scale(.97) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
@media(min-width:1100px) and (max-height:850px){.dossier-areas{padding:9px 16px}.dossier-areas>strong{margin-bottom:6px}.dossier-areas>div{gap:5px}.dossier-areas span{font-size:.75rem}}
@media(max-width:620px){.dossier-areas{padding:13px 14px}.dossier-areas>div{grid-template-columns:1fr 1fr}.dossier-areas span{font-size:.72rem;white-space:normal}}
@media(prefers-reduced-motion:reduce){.reward-card.is-confirmed .big-badge{animation:none}}
