/* METROPOLI BCN — Guardianes de Internet (kids) page styles.
   Externalised from the page's inline <style> to satisfy the strict CSP
   (style-src 'self'; style-src-attr 'none'). Edit here, not in the HTML. */
/* ===== kids layer (additive) ===== */
body{font-size:19px}
.kid .wrap{max-width:1040px}
.kid h1{color:#fff;font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.05}
.kid h1 em{font-style:italic;font-weight:500;color:var(--teal-bright)}
.kid h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:14px}
.kid .lead{font-size:clamp(1.1rem,2vw,1.35rem);max-width:40ch}
.kid p{max-width:60ch}
.tag{display:inline-flex;align-items:center;gap:8px;font:700 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.tag::before{content:'';width:22px;height:2px;background:var(--amber-bright)}
.section--dark .tag{color:var(--teal-bright)}
/* header: logo + languages always visible */
.khead{position:sticky;top:0;z-index:30;background:rgba(11,27,51,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-dark)}
.khead .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.khead .brand img{height:56px;width:auto;margin-left:-6px}
.knav{display:flex;gap:22px;align-items:center}
.knav a{color:var(--on-dark);font:600 .86rem var(--sans);text-decoration:none}
.knav a:hover{color:#fff}
.langs{display:flex;gap:4px;background:rgba(255,255,255,.06);border:1px solid var(--rule-dark);border-radius:999px;padding:4px}
.langs button{background:none;border:0;color:var(--on-dark-soft);font:800 .74rem/1 var(--sans);letter-spacing:.1em;padding:8px 10px;border-radius:999px;cursor:pointer}
.langs button.on{background:var(--teal-bright);color:var(--navy-deep)}
.langs button:hover:not(.on){color:#fff}
/* mobile-only language dropdown (same pattern as the main site header) */
.lang-select-wrap{display:none}
.lang-code{color:#fff;font:600 .72rem/1 var(--sans);letter-spacing:.08em;padding:10px 17px 10px 6px}
.lang-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;appearance:none;-webkit-appearance:none;border:0;cursor:pointer}
.lang-select option{color:var(--ink,#0b1b33);background:#fff;font-weight:500;letter-spacing:0}
.lang-select-wrap:focus-within{outline:2px solid var(--teal-bright);outline-offset:2px}
.lang-select-wrap::after{content:"";position:absolute;right:5px;top:50%;width:5px;height:5px;border-right:1.5px solid var(--teal-bright);border-bottom:1.5px solid var(--teal-bright);transform:translateY(-70%) rotate(45deg);pointer-events:none}
@media (max-width:820px){.knav{display:none}.khead .brand img{height:46px}
.langs{display:none}
.lang-select-wrap{display:inline-flex;align-items:center;position:relative;margin-left:auto}
.lang-code{padding:10px 17px 10px 6px}}
@media (max-width:480px){.khead .brand img{height:40px}
.lang-code{font-size:.66rem;letter-spacing:.04em;padding:10px 15px 10px 4px}}
/* fields as illustrations */
.kfield{position:relative;min-height:420px;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#10294a 0%,var(--navy) 55%,var(--navy-deep) 100%);color:var(--on-dark)}
.kfield>.wrap{position:relative;z-index:1;padding-top:40px;padding-bottom:40px}
.kfield .hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-soft);background:rgba(6,16,31,.6);padding:8px 14px;border-radius:999px;white-space:normal;text-align:center;line-height:1.4;max-width:calc(100% - 32px)}
/* hero: the mission card */
.khero{min-height:max(88vh,540px);display:flex;align-items:center;border-radius:0}
.khero .card{position:relative;background:rgba(6,16,31,.72);backdrop-filter:blur(6px);border:3px solid var(--teal-bright);border-radius:24px;padding:34px 34px 30px;max-width:580px;box-shadow:0 0 0 8px rgba(60,217,203,.14),0 30px 60px rgba(0,0,0,.45);transform:rotate(-1.2deg)}
.khero .card>*{transform:rotate(1.2deg)}
.mission{position:absolute;top:-16px;left:26px;background:var(--amber-bright);color:var(--navy-deep);font:900 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;border-radius:999px;transform:rotate(-5deg)!important;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.mascot{position:absolute;right:-22px;top:-30px;width:88px;height:88px;transform:rotate(8deg)!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));animation:wobble 2.6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(2deg) translateY(-8px)}}
.khero .card .lead{color:#e6eef8;margin-top:14px;max-width:none}
.puf{display:inline-block;background:var(--amber-bright);color:var(--navy-deep);font-weight:900;padding:0 .35em;border-radius:.45em;transform:rotate(-5deg);animation:puf 1.4s ease-in-out infinite}
@keyframes puf{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(-5deg) scale(1.16)}}
/* hero "learn or play" choice: two big, obvious paths */
.hero-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.hchip{position:relative;display:flex;flex-direction:column;gap:2px;text-decoration:none;border-radius:16px;padding:14px 16px 13px;border:2.5px solid;transition:transform .14s,box-shadow .14s}
.hchip b{font:900 1.08rem/1.1 var(--sans);letter-spacing:.01em}
.hchip span:not(.arr){font:600 .82rem/1.2 var(--sans);opacity:.92}
.hchip .arr{position:absolute;top:12px;right:14px;font-size:1.15rem;font-weight:900;line-height:1}
.hchip--learn{background:rgba(60,217,203,.14);border-color:var(--teal-bright);color:#eafffb}
.hchip--learn b{color:var(--teal-bright)}
.hchip--play{background:rgba(242,176,78,.16);border-color:var(--amber-bright);color:#fff2dd}
.hchip--play b{color:var(--amber-bright)}
.hchip:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.4)}
@media (max-width:420px){.hero-choice{grid-template-columns:1fr}}
.zap{display:none;align-items:center;gap:12px;margin-top:20px;background:rgba(60,217,203,.12);border:2px dashed var(--teal-bright);border-radius:999px;padding:8px 18px 8px 12px;color:#fff;font:800 .9rem var(--sans)}
/* only reveal the "attacks stopped / rank" chip once the child has popped one */
.zap.on{display:inline-flex}
.zap b{font-family:var(--serif);font-size:1.7rem;color:var(--teal-bright);line-height:1;min-width:1.2em;text-align:center}
.zap .rank{display:block;font:800 .64rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--amber-bright)}
.zap.pop b{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.split .kfield{min-height:360px}
.split--flip .kfield{order:-1}
/* character cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.kcard{border-radius:22px;padding:22px 20px 24px;background:var(--paper);border:2px solid var(--rule);transition:transform .15s;position:relative;overflow:hidden}
.kcard:hover{transform:translateY(-4px) rotate(-.6deg)}
.kcard .ico{width:96px;height:96px;margin:0 auto 14px;border-radius:28px;display:grid;place-items:center}
.kcard .ico svg{width:72px;height:72px;display:block}
.kcard.bad .ico{background:radial-gradient(circle at 30% 25%,#ffe1db,#ffb9ab)}
.kcard.good .ico{background:radial-gradient(circle at 30% 25%,#e2fbf8,#b5efe9)}
.kcard h3{font-family:var(--sans);font-size:1.08rem;font-weight:900;margin-bottom:6px;text-align:center}
.kcard p{font-size:.92rem;margin:0;text-align:center}
.section--dark .kcard{background:rgba(255,255,255,.05);border-color:var(--rule-dark)}
.section--dark .kcard.bad .ico{background:radial-gradient(circle at 30% 25%,rgba(239,106,85,.45),rgba(239,106,85,.18))}
/* glossary */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.wcard{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center;background:#fff;border:2px solid var(--rule);border-radius:22px;padding:18px 20px 18px 16px;transition:transform .15s}
.wcard:hover{transform:translateY(-3px) rotate(.4deg)}
.wcard .ico{width:104px;height:104px;border-radius:30px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff6e5,#ffe2b3)}
.wcard:nth-child(even) .ico{background:radial-gradient(circle at 30% 25%,#e2fbf8,#b5efe9)}
.wcard .ico svg{width:78px;height:78px;display:block}
.wcard h3{font-family:var(--sans);font-size:1.12rem;font-weight:900;margin-bottom:6px;color:var(--navy)}
.wcard p{font-size:.92rem;margin:0}
@media (max-width:900px){.wcards{grid-template-columns:1fr}}
@media (max-width:420px){.wcard{grid-template-columns:1fr;text-align:center}.wcard .ico{margin:0 auto}}
/* quiz */
.quiz{display:grid;gap:14px;margin-top:28px}
.q{border:2px solid var(--rule);border-radius:18px;padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:var(--paper)}
.q b{font-family:var(--serif);font-size:1.15rem;color:var(--navy);font-weight:600}
.q .btns{display:flex;gap:8px}
.q button,.rq button{border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:12px 22px;font:800 .95rem var(--sans);cursor:pointer;min-width:84px}
.q button:hover{background:var(--navy);color:#fff}
.q .fb{grid-column:1/-1;font-size:.95rem;margin:0;display:none;padding-top:10px;border-top:2px dashed var(--rule)}
.q.ok{border-color:var(--teal)}.q.ok .fb{display:block;color:var(--teal)}
.q.ko{border-color:#c25a2a}.q.ko .fb{display:block;color:#c25a2a}
.q.done button{opacity:.45;pointer-events:none}
/* mark the chosen answer green (right) or red (wrong); highlight the right one too */
.q.done button.pick-ok{opacity:1;background:var(--teal);border-color:var(--teal);color:#fff}
.q.done button.pick-ko{opacity:1;background:#c25a2a;border-color:#c25a2a;color:#fff}
/* game */
.game{position:relative;min-height:max(78vh,460px);background:var(--navy-deep);color:#fff;border-radius:0;overflow:hidden}
.game .hud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;gap:12px;padding:16px var(--gutter);font:700 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.game .hud span{background:rgba(6,16,31,.7);border:1px solid var(--rule-dark);border-radius:999px;padding:10px 14px}
.game .hud b{font-family:var(--serif);font-size:1.15rem;letter-spacing:0;color:var(--teal-bright);margin-left:6px}
.game .hud .lives b{color:#ef6a55}.game .hud .charges b{color:var(--amber-bright)}
.game .overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(6,16,31,.74);backdrop-filter:blur(4px);text-align:center;padding:24px;overflow:auto}
.game .overlay.is-off{display:none}
.game .overlay .box{max-width:620px;width:100%}
.game .overlay h2{color:#fff;margin-bottom:10px}
.game .overlay p{color:#d5dfec;margin:0 auto 22px;max-width:46ch}
.game .overlay .btn--fill{font-size:1.05rem;padding:18px 30px}
.game .overlay .tip{margin-top:18px;font-size:.92rem;color:var(--amber-bright)}
.game .overlay .best{font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:14px}
.overlay--lost{background:rgba(120,20,20,.55)!important}
.lost{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.lost svg{width:64px;height:64px;animation:lostbeat .9s ease-in-out infinite}
@keyframes lostbeat{0%,100%{transform:scale(1)}30%{transform:scale(1.15)}}
.lost h2{margin:0;color:#fff;font-size:clamp(1.6rem,4vw,2.4rem)}
.rcard{background:var(--navy-deep);border:4px solid var(--amber-bright);border-radius:24px;padding:22px 22px 18px;box-shadow:0 0 0 8px rgba(242,176,78,.2),0 24px 60px rgba(0,0,0,.5);max-width:560px;margin:0 auto}
.rcard .rtitle{font:900 .78rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-bright);margin:0 0 6px}
.rcard .rsub{margin:0 0 14px;font-size:.95rem}
.rcard .rq-q{font-family:var(--serif);font-size:1.25rem;color:#fff;margin:0 0 14px;max-width:none}
.rq{display:grid;gap:10px;margin:0 auto 10px;max-width:460px}
.rq button{background:rgba(255,255,255,.06);border-color:var(--rule-dark-strong);color:#fff;text-align:left;padding:14px 18px;border-radius:14px}
.rq button:hover{background:rgba(60,217,203,.18);border-color:var(--teal-bright)}
/* answered feedback: correct = clear green, wrong = clear red */
.rq button.ok{background:#2fb673;color:#fff;border-color:#2fb673;font-weight:900;box-shadow:0 0 0 3px rgba(47,182,115,.35)}
.rq button.ko{background:#ef4444;color:#fff;border-color:#ef4444;font-weight:900;box-shadow:0 0 0 3px rgba(239,68,68,.35)}
.rq.done button{pointer-events:none}
.rq.done button:not(.ok):not(.ko){opacity:.5}
.rfb{min-height:1.4em;font-weight:700;color:var(--teal-bright)}
.rfb.ko{color:#ff9d8c}
/* explicit "continue" confirm after a revive question (no auto-advance) */
.rq-go{margin-top:14px;font-size:1rem;padding:14px 26px}
.rq-go.is-off{display:none}
@media (max-height:520px),(max-width:400px){.lost{margin-bottom:8px;gap:10px}.lost svg{width:40px;height:40px}.lost h2{font-size:1.3rem}.rcard{padding:12px 14px 8px;border-width:3px;border-radius:18px}.rcard .rsub{display:none}.rcard .rtitle{margin-bottom:8px;font-size:.7rem}.rcard .rq-q{font-size:1.05rem;margin-bottom:8px}.rq{gap:6px}.rq button{padding:9px 14px;font-size:.88rem;border-radius:10px}.rfb{min-height:1.2em;font-size:.9rem}}
@media (max-height:520px){.khero{min-height:100vh}.khero .card{padding:18px 20px;max-width:460px}.khero h1{font-size:1.6rem}.khero .lead{font-size:.98rem;margin-top:8px}.kfield .hint{bottom:8px}.game .overlay{padding:12px}.game .overlay h2{font-size:1.5rem;margin-bottom:6px}.game .overlay p{font-size:.92rem;margin-bottom:12px}.game .overlay .btn--fill{padding:12px 22px;font-size:.95rem}.game .hud{padding:10px var(--gutter)}.mascot{width:64px;height:64px;right:-14px;top:-22px}}
/* talks */
.talks{background:var(--navy);color:var(--on-dark)}
.talks .lead{color:#d5dfec;max-width:60ch}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.tcard{border:1px solid var(--rule-dark);border-radius:18px;padding:22px;background:rgba(255,255,255,.04)}
.tcard h3{font-family:var(--sans);font-size:1rem;font-weight:800;color:#fff;margin-bottom:8px}
.tcard p{font-size:.92rem;margin:0;color:#c6d3e4}
.talks .note{font-size:.9rem;color:var(--on-dark-soft);margin-top:14px}
.flangs{display:flex;gap:10px;flex-wrap:wrap}
.flangs button{background:none;border:1px solid var(--rule-dark);color:var(--on-dark);border-radius:999px;padding:6px 12px;font:700 .72rem var(--sans);letter-spacing:.1em;cursor:pointer}
.flangs button.on{border-color:var(--teal-bright);color:var(--teal-bright)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}
  /* on phones the explanatory text must come BEFORE its illustration, so a graphic is
     never the first confusing thing you meet when scrolling into a section */
  .split>div:first-child{order:0}.split .kfield,.split--flip .kfield{order:2;min-height:300px;margin-top:8px}
  .q{grid-template-columns:1fr}.game .hud{flex-wrap:wrap;justify-content:center}.game .hud span{padding:8px 11px;font-size:.7rem}.tcards{grid-template-columns:1fr}}
@media (max-width:900px) and (orientation:portrait){.khero{align-items:flex-end;padding-bottom:70px}.khero .card{margin:0 auto}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.khero .card{padding:26px 22px 22px}.mascot{width:70px;height:70px;right:-12px;top:-26px}}

/* ===== utilities replacing former inline style= attributes (CSP-safe) ===== */
.k-teal{color:var(--teal-bright)}
.k-teal-center{color:var(--teal-bright);justify-content:center}
.k-soft{color:#d5dfec}
.k-amber{color:var(--amber)}
.k-white{color:#fff}
.k-field-lg{margin-top:32px;min-height:340px}

/* ===== mobile: first screen + every animation/graphic fully visible (no mid-fold cuts) =====
   Two things break the "fits one screen" promise on phones:
   1. `vh` measures the TALL viewport (browser chrome hidden), so 88vh + the 70px sticky
      header pushed the hero card ~20% under the fold. `svh` = the small, chrome-aware
      viewport, so hero + header fill exactly one visible screen.
   2. The animation fields weren't capped to the viewport, so they straddled the fold.
      Capping each field below one screen means scrolling to it always shows it whole. */
:root{--khead-h:76px}
@media (max-width:900px){
  /* in-page anchors must clear the sticky header */
  .section,.khero,.game,#internet,#malos,#palabras,#escudo,#ia,#riesgos,#quiz,#juego{scroll-margin-top:var(--khead-h)}

  /* FIRST SCREEN: hero + header = one visible screen, card centered (not clipped) */
  .khero{min-height:calc(100svh - var(--khead-h));align-items:center}
  .khero .card{margin:0 auto}

  /* animation illustration fields sit fully inside one screen when scrolled to */
  .kfield:not(.khero){min-height:60svh;max-height:calc(100svh - var(--khead-h) - 20px)}
  .split .kfield{min-height:56svh}
  .kfield.k-field-lg{min-height:56svh;margin-top:20px}

  /* the interactive game fills one visible screen too */
  .game{min-height:calc(100svh - var(--khead-h))}
  /* keep overlay content clear of the wrapping HUD chips at the top on phones */
  .game .overlay{padding-top:96px;align-content:center}
  .game .overlay .box{max-width:none}
}
/* portrait: keep the hero card centered in its one-screen box (was pinned to the bottom) */
@media (max-width:900px) and (orientation:portrait){
  .khero{align-items:center;padding-bottom:0}
}