/* GRCthon Inclusivo · edición 5.0
   Diseño limpio para kiosco táctil de 25 pulgadas. No utiliza ilustraciones. */
:root {
  --navy:#003058;
  --deep:#002644;
  --blue:#006fa8;
  --mint:#00b69c;
  --paper:#ffffff;
  --canvas:#f4f8fa;
  --stroke:#d3e3e9;
  --text:#153b54;
}
html{scroll-behavior:smooth}
body{background:#e9f2f6;color:var(--text)}
.masthead{height:78px;box-shadow:0 1px 0 #dce8ef}
.brandlock img{max-height:60px}
.top-control{min-height:48px;font-size:1rem}
.app{align-items:stretch}
.panel{max-width:1720px}
/* Inicio, sin imágenes ni columnas decorativas */
.welcome{
  min-height:calc(100dvh - 132px);
  padding:clamp(30px,4.3vw,76px);
  background:linear-gradient(123deg,#002642 0%,#003c63 65%,#006b84 100%);
  gap:clamp(30px,5vw,90px);
  border-radius:0 0 24px 24px;
  overflow:visible;
}
.welcome-copy{width:54%;max-width:775px}
.welcome h1{font-size:clamp(3.6rem,5.25vw,6.4rem);line-height:1.04;letter-spacing:-.045em}
.welcome .subhero{font-size:clamp(1.8rem,2.7vw,2.7rem)}
.welcome-desc{max-width:635px;font-size:clamp(1.12rem,1.45vw,1.37rem)}
.welcome .btn.big{font-size:1.3rem;min-height:72px;padding:18px 32px}
.welcome-journey{
  width:46%;max-width:560px;
  padding:clamp(22px,2.5vw,40px);
  border-radius:23px;
  background:rgba(255,255,255,.96);
  color:#003858;
  box-shadow:0 18px 50px rgba(0,20,38,.17);
  display:flex;
  flex-direction:column;
  gap:0;
}
.journey-heading{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.journey-heading>span{font-size:.78rem;letter-spacing:.15em;color:#007a83;font-weight:850}
.journey-heading>strong{font-size:clamp(1.25rem,1.5vw,1.65rem);line-height:1.28}
.journey-step{display:flex;gap:18px;align-items:center;padding:14px 0;border-top:1px solid #deeaef}
.journey-num{font-weight:900;font-size:1.16rem;color:#007f83;background:#e5f8f2;border-radius:13px;padding:12px 11px;min-width:58px;text-align:center}
.journey-step>span:last-child{display:flex;flex-direction:column;gap:4px}
.journey-step strong{font-size:1.16rem}
.journey-step small{font-size:.97rem;color:#506c79;line-height:1.36}
.welcome-journey>p{margin:15px 0 0;color:#007a68;font-weight:720;font-size:1rem;line-height:1.48}
/* Misión. Un solo plano de lectura y controles grandes */
.play{padding:clamp(22px,2.7vw,43px) clamp(21px,3.5vw,60px) 28px;background:#f6fafb;border-radius:0 0 24px 24px}
.play-heading h2{font-size:clamp(2.15rem,3.2vw,3.4rem);letter-spacing:-.04em;margin-bottom:9px}
.eyebrow.dark{font-size:.9rem;letter-spacing:.14em;margin-bottom:11px}
.intro-text{font-size:clamp(1.1rem,1.45vw,1.4rem);line-height:1.45;color:#516d7d;max-width:1050px}
.score-box{min-width:156px;padding:17px 22px;border-radius:17px}
.score-box strong{font-size:2.65rem}
.score-box span,.score-box small{font-size:.91rem}
.progress{height:9px;margin:20px 0 24px}
.game-content{flex:1;min-height:0;padding:0;position:relative}
/* Cada actividad ocupa el ancho, sin contenedores de imagen */
.scene-title{color:#003b5a;font-size:clamp(1.18rem,1.5vw,1.48rem);font-weight:760;line-height:1.46;margin:0 0 21px}
.risk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.risk-card{
  min-height:154px;
  border:2px solid #d6e5ec;
  border-radius:18px;
  padding:20px 17px;
  gap:14px;
  box-shadow:0 4px 11px rgba(0,48,88,.03);
  transition:background .15s,border-color .15s,transform .15s;
}
.risk-card .item-icon{font-size:2rem;color:#007889;background:#e5f7f4;min-width:60px;height:58px;display:grid;place-items:center;border-radius:12px}
.risk-card .risk-label{font-size:clamp(1.04rem,1.22vw,1.28rem);line-height:1.36}
.risk-card.found{background:#e6faf3;border-color:#23ad91}
.risk-card.safe-choice{background:#f0f7fc;border-color:#a7cad7}
/* Ordenar documentos */
.sort-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:19px}
.task-column,.drop-column{min-height:360px;padding:23px 25px;border-radius:18px;background:#fff;border:1px solid #d8e7ed}
.column-label{font-size:.92rem;color:#567687;letter-spacing:.08em;margin-bottom:21px}
.drag-files{gap:13px}
.file-piece{min-height:76px;padding:15px 17px;border-radius:13px;font-size:clamp(1.05rem,1.2vw,1.27rem)}
.file-piece:before{font-size:1.8rem}
.drag-hint{font-size:1.02rem;line-height:1.45}
.drop-zones{gap:13px}
.dropzone{min-height:250px;padding:20px 12px;border-radius:15px}
.dropzone .folder{font-size:2.6rem;color:#007e85}
.dropzone b{font-size:1.25rem}
.dropzone .drop-result{font-size:1rem}
/* Decisiones. Pregunta y tres opciones protagonizan la pantalla */
.decision-prompt{padding:29px 32px;border-radius:18px;box-shadow:0 6px 20px rgba(0,48,88,.06)}
.decision-prompt .step-label{font-size:.92rem;letter-spacing:.13em}
.decision-prompt h3{font-size:clamp(1.4rem,1.9vw,2rem);line-height:1.37;margin-top:13px}
.decision-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.decision-option{min-height:183px;border-radius:17px;padding:26px 20px;gap:15px;font-size:clamp(1.05rem,1.22vw,1.3rem);line-height:1.5;align-items:flex-start}
.decision-option .choice-number{min-width:40px;height:40px;font-size:1.03rem}
.interlude,.prisma-next{margin-top:20px;min-height:59px}
/* Prisma, convertido en mesa de evidencias con elementos funcionales */
.prisma-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:18px}
.prisma-panel{min-height:385px;border-radius:18px;padding:25px 28px;box-shadow:0 6px 20px rgba(0,48,88,.06);background:#003f62}
.prisma-question .step-label{font-size:.87rem}
.prisma-question h3{font-size:clamp(1.3rem,1.65vw,1.75rem);line-height:1.34;margin:13px 0 12px}
.prisma-question p{font-size:1.04rem;line-height:1.45;color:#d4e8ef}
.scanner{min-height:150px;border-radius:16px;background:#0b5975;border:2px dashed #69dbca}
.scanner:before,.scanner:after{display:none}
.scanner-center .scanner-glyph{font-size:2.2rem}
.scanner-center strong{font-size:1rem}
.scanner-center small{font-size:.92rem}
.scanner-beam{opacity:.7}
.evidence-options{padding:20px;border-radius:18px;gap:12px}
.evidence-head .column-label{margin-bottom:0}
.evidence-instruction{font-size:.94rem}
.evidence-card{min-height:95px;border-radius:13px;padding:15px 16px;gap:16px}
.evidence-number{min-width:52px;height:55px;font-size:1.22rem}
.evidence-main strong{font-size:1.2rem;line-height:1.3}
.evidence-main small{font-size:1rem}
/* Retroalimentación: nunca escondida tras una animación */
.mission-bottom{align-items:stretch;margin-top:26px;gap:17px;min-height:76px}
.feedback{max-width:none;flex:1;font-size:clamp(1.02rem,1.13vw,1.2rem);font-weight:680;line-height:1.52;padding:16px 20px;border-radius:12px;min-height:68px;display:flex;align-items:center}
.mission-actions{max-width:480px;gap:11px;align-content:center;align-items:center}
.mission-actions .btn{min-height:57px;font-size:1rem;padding:12px 19px}
/* Contraste y facilidad de toque */
.risk-card:hover,.decision-option:hover,.file-piece:hover,.evidence-card:hover{box-shadow:0 8px 19px rgba(0,62,85,.09)}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:4px solid #ffa84c;outline-offset:3px}
/* Pantalla final y formulario */
.finale-head h2{font-size:clamp(2rem,2.6vw,2.8rem)}
.finale-layout{grid-template-columns:.8fr 1.2fr}
.signup-card{padding:28px}
.signup-header h3{font-size:1.5rem}
.field input{min-height:51px}
/* Resoluciones medianas y pantallas con altura reducida */
@media (min-width:1100px) and (max-height:850px){
  .play{padding-top:18px;padding-bottom:18px}
  .play-heading h2{font-size:2.25rem}
  .progress{margin:12px 0 15px}
  .risk-card{min-height:124px;padding:11px;gap:7px}
  .risk-card .item-icon{width:45px;min-width:45px;height:40px;font-size:1.55rem}
  .decision-prompt{padding:19px 25px}
  .decision-option{min-height:130px;padding:18px 16px}
  .task-column,.drop-column{min-height:300px;padding:17px}
  .dropzone{min-height:190px}
  .prisma-panel{min-height:320px;padding:17px 22px}
  .scanner{min-height:110px}
  .evidence-card{min-height:78px}
  .mission-bottom{margin-top:14px}
  .feedback{min-height:57px;font-size:1rem;padding:12px 14px}
}
@media(max-width:1100px){
  .welcome{gap:25px;padding:35px 30px}
  .welcome-copy{width:55%}
  .welcome-journey{width:45%;padding:20px}
  .sort-grid,.prisma-layout{grid-template-columns:1fr}
  .task-column,.drop-column,.prisma-panel{min-height:0}
  .dropzone{min-height:135px}
  .mission-bottom{flex-direction:column}
  .mission-actions{max-width:none;justify-content:flex-end}
  .feedback{width:100%}
  .prisma-panel{gap:18px}
  .scanner{min-height:130px}
  .decision-option{min-height:145px}
}
@media(max-width:750px){
  .masthead{height:75px;padding:10px 14px}
  .welcome{flex-direction:column;min-height:0;padding:37px 22px;gap:22px}
  .welcome-copy,.welcome-journey{width:100%;max-width:none}
  .welcome h1{font-size:3.2rem}
  .welcome-journey{padding:20px}
  .journey-step{padding:10px 0}
  .play{padding:22px 14px}
  .play-heading h2{font-size:clamp(1.65rem,6vw,2.25rem)}
  .intro-text{font-size:1.06rem}
  .score-box{min-width:95px;padding:10px}
  .score-box strong{font-size:1.7rem}
  .risk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .risk-card{min-height:125px;padding:12px 7px;gap:8px}
  .risk-card .risk-label{font-size:.94rem}
  .risk-card .item-icon{width:44px;height:38px;min-width:44px;font-size:1.6rem}
  .sort-grid{grid-template-columns:1fr}
  .drop-zones{grid-template-columns:1fr}
  .dropzone{min-height:88px;gap:4px}
  .decision-prompt{padding:22px 18px}
  .decision-prompt h3{font-size:1.34rem}
  .decision-options{grid-template-columns:1fr;gap:10px}
  .decision-option{min-height:82px;padding:16px;font-size:1.06rem}
  .prisma-panel{padding:20px}
  .scanner{min-height:125px}
  .evidence-options{padding:14px}
  .evidence-card{min-height:78px;padding:11px}
  .evidence-main strong{font-size:1.03rem}
  .evidence-main small{font-size:.87rem}
  .mission-bottom{flex-direction:column;align-items:stretch}
  .mission-actions{justify-content:stretch;max-width:none}
  .mission-actions .btn{flex:1;min-height:55px}
  .finale-layout{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Hidden controls must not occupy space before their missions are completed. */
[hidden]{display:none!important}

@media(min-width:1101px){.game-content{flex:0 0 auto}.mission-bottom{margin-top:28px}}


/* V6 · Iconografía táctil legible, sin alterar el diseño de las misiones */
/* Mantener iconos grandes en pantallas táctiles, incluidas las de 25 pulgadas. */
.risk-card{
  min-height:158px;
  gap:10px;
}
.risk-card .item-icon{
  display:grid;
  place-items:center;
  width:78px;
  height:70px;
  min-width:78px;
  flex:0 0 auto;
  font-size:3.35rem;
  line-height:1;
  font-family:Georgia, 'Segoe UI Symbol', serif;
  font-weight:700;
  border-radius:18px;
}
.risk-card .risk-label{line-height:1.26}
.dropzone{
  gap:12px;
}
.dropzone .folder{
  width:92px;
  height:82px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-family:Georgia, 'Segoe UI Symbol', serif;
  font-size:4.4rem;
  font-weight:650;
  line-height:1;
  color:#007e85;
  background:rgba(0,182,156,.08);
  border-radius:19px;
}
.file-piece:before{font-size:2.1rem;line-height:1}
.decision-option .choice-number{
  width:42px;
  height:42px;
  font-size:1.28rem;
  font-weight:850;
}
@media (min-width:1100px) and (max-height:850px){
  .risk-card{min-height:136px;gap:7px;padding:10px}
  .risk-card .item-icon{width:65px;height:60px;min-width:65px;font-size:2.75rem}
  .dropzone .folder{width:76px;height:68px;font-size:3.55rem}
}
@media (max-width:750px){
  .risk-card{min-height:146px;gap:8px;padding:10px 7px}
  .risk-card .item-icon{width:60px;height:56px;min-width:60px;font-size:2.55rem;border-radius:13px}
  .dropzone{gap:6px}
  .dropzone .folder{width:60px;height:52px;font-size:2.8rem;border-radius:12px}
}


/* GRCthon 7.0 · progreso, recompensa y conexión profesional. Sin ilustraciones. */
.welcome{background:radial-gradient(ellipse at 81% 20%,rgba(0,182,156,.19),transparent 43%),linear-gradient(116deg,#002640 0%,#00365d 54%,#005b72 100%)}
.welcome h1{font-size:clamp(3.6rem,5.65vw,6.9rem);line-height:1.05}
.welcome .subhero{color:#6bedd6;font-size:clamp(2rem,3vw,3rem);letter-spacing:-.03em;margin-bottom:26px}
.welcome-encouragement{font-size:.99rem;max-width:570px;line-height:1.55;color:#b7eade;margin:16px 0 0}
.welcome .btn.primary.big{position:relative;box-shadow:0 0 0 6px rgba(0,182,156,.14),0 16px 35px rgba(0,15,32,.28);animation:cta-breathe 3.6s ease-in-out infinite}
@keyframes cta-breathe{50%{box-shadow:0 0 0 13px rgba(0,182,156,.065),0 16px 35px rgba(0,15,32,.28)}}
.welcome-journey{border:1px solid #daeee8}
.journey-status{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 0 9px}
.journey-status span{display:grid;place-items:center;background:#e8faf5;border:1px solid #c6e8e0;border-radius:12px;color:#007d71;min-height:49px;font-weight:900;font-size:1.1rem}
.journey-heading>strong{font-size:clamp(1.35rem,1.8vw,1.9rem)}
.mission-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 9px}
.track-stop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:57px;border:1px solid #d6e6eb;border-radius:13px;background:#fff;color:#61798a;font-size:1.05rem;font-weight:780;transition:background .25s,border-color .25s}
.track-symbol{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#ecf4f6;color:#4c7584;font-size:.99rem;font-weight:850}
.track-stop.is-current{border-color:#00a993;background:#e7fbf5;color:#00695e;box-shadow:inset 0 0 0 1px #00b69c}
.track-stop.is-current .track-symbol{background:#00b69c;color:#002e32}
.track-stop.is-done{background:#e7f8f2;border-color:#77ccad;color:#006c59}
.track-stop.is-done .track-symbol{background:#0d9a7c;color:white;font-size:1.22rem}
.progress{margin:8px 0 14px;height:9px}
.story-context{font-size:.86rem;color:#547283;line-height:1.35;margin:1px 0 17px;font-weight:660}
.story-context span{color:#00a28e;padding:0 4px}
.score-pop{animation:score-bounce .48s ease-out}
@keyframes score-bounce{35%{transform:scale(1.21);color:#009c83}100%{transform:scale(1);color:#003058}}
.mission-unlocked{display:flex;align-items:center;gap:15px;background:#e0f8f0;border:1.5px solid #52c5a1;border-radius:17px;padding:14px 18px;margin-top:18px;animation:unlock-up .42s ease-out}
@keyframes unlock-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.unlock-emblem{min-width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#009b7c;color:white;font-size:1.8rem;font-weight:850}
.mission-unlocked strong{color:#006b56;font-size:1.17rem}.mission-unlocked p{margin:3px 0 0;color:#365f59;font-size:.95rem}
.unlock-points{margin-left:auto;white-space:nowrap;background:#fff;border-radius:99px;color:#006b56;padding:9px 12px;font-weight:750;font-size:.81rem}
.mission-bottom{margin-top:16px}
.feedback[data-tone="success"]{background:#e7f8f1;border:1px solid #abdcc4;color:#00634d}
.feedback[data-tone="learn"]{background:#f4f7fc;border:1px solid #bcd5e5;color:#174a6b}
.finale-head p{max-width:1220px;line-height:1.48}
.finale-layout{grid-template-columns:1fr 1.05fr;gap:20px}
.reward-card{min-height:0;justify-content:flex-start;padding:22px 22px 18px}
.big-badge{width:76px;height:76px;font-size:3rem;margin-bottom:8px}
.reward-overline{margin-top:0}.award-name{font-size:1.6rem;margin:5px 0 3px}
.award-subline{font-size:.85rem}.final-score{font-size:2.15rem;margin-top:6px}
.reward-card .score-context{font-size:.79rem;line-height:1.36;margin:7px 0 0;color:#c6e4e9}
.favorite-box{width:100%;border-top:1px solid rgba(255,255,255,.21);margin-top:15px;padding-top:13px;text-align:left}
.favorite-box h3{color:#fff;font-size:1.11rem;margin:0 0 5px}
.favorite-box>p{font-size:.83rem;color:#c5e2e7;margin:0 0 11px;line-height:1.3}
.favorite-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.favorite-grid button{min-height:44px;border:1px solid #7ab5c0;background:rgba(255,255,255,.09);color:#fff;border-radius:10px;font-size:.94rem;font-weight:750;text-align:left;padding:9px 13px}
.favorite-grid button:hover,.favorite-grid button.is-favorite{background:#d6f9ed;border-color:#50dabf;color:#004b4f}
.favorite-box .favorite-description{background:rgba(255,255,255,.1);color:#e6f4f6;margin:10px 0 0;min-height:47px;padding:9px 11px;border-radius:10px;font-size:.81rem;line-height:1.42}
.signup-card{padding:25px}
.signup-header h3{font-size:1.75rem;line-height:1.16}
.signup-header p{margin-bottom:9px}
.signup-reassurance{background:#e9f9f3;border-left:4px solid #00b69c;color:#17574f!important;border-radius:8px;padding:9px 12px;margin:11px 0 16px!important;font-size:.87rem!important}
.signup-actions .btn.primary{font-size:1rem}
@media(max-width:1150px){.mission-track{gap:7px}.track-stop{font-size:.88rem;gap:6px}.story-context{margin-bottom:14px}.finale-layout{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.finale-layout{grid-template-columns:1fr}.reward-card{max-width:none}}
@media(max-width:750px){.welcome h1{font-size:clamp(3rem,10vw,4.5rem)}.welcome .subhero{font-size:2rem}.mission-track{gap:5px}.track-stop{display:flex;flex-direction:column;min-height:67px;gap:3px;font-size:.72rem;padding:4px}.track-symbol{height:27px;width:30px;font-size:.78rem}.story-context{font-size:.79rem}.mission-unlocked{padding:11px;gap:10px}.unlock-emblem{min-width:42px;height:42px}.mission-unlocked strong{font-size:.94rem}.mission-unlocked p{font-size:.83rem}.unlock-points{display:none}.favorite-grid button{font-size:.86rem}}
@media(prefers-reduced-motion:reduce){.welcome .btn.primary.big{animation:none}.score-pop{animation:none}.mission-unlocked{animation:none}}

@media(min-width:851px){.reward-card{justify-content:space-evenly}}