/* ═══════════════════════════════════════════════════════
   CAMPUS MANARIA — Bienestar emocional
   Paleta austral: bosque nativo, turquesa austral, crema
   ═══════════════════════════════════════════════════════ */
:root {
  --forest:#1F5A3D; --forest-deep:#1B3B2B; --turquesa:#00A896; --teal:#2D9596;
  --cream:#FFFDF6; --bruma:#E5E9E8; --mint:#DFF0E6; --mint-soft:#EEF7F1;
  --gold:#E8B430; --ink:#22312A; --ink-soft:#5A6B60;
  --white:#fff; --rojo:#D9534F; --ambar:#E8B430; --verde:#3FA34D;
  --radius:20px;
  --sh-sm:0 4px 14px rgba(27,59,43,.08); --sh-md:0 12px 30px rgba(27,59,43,.14);
  --font-d:'Baloo 2',cursive; --font-b:'Nunito',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); background:var(--cream); color:var(--ink); min-height:100vh; }
h1,h2,h3,h4 { font-family:var(--font-d); color:var(--forest-deep); line-height:1.15; }
button { font-family:var(--font-b); cursor:pointer; }
.ico { width:1em; height:1em; display:inline-block; vertical-align:-.14em; fill:none; }

/* ─────────── AUTH ─────────── */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:26px 14px;
  background:radial-gradient(120% 90% at 15% 8%, #eaf6ef 0%, transparent 55%),
             radial-gradient(110% 80% at 88% 92%, #e3f2f0 0%, transparent 50%), var(--cream); }
.auth-card { width:min(460px,100%); background:var(--white); border-radius:28px; box-shadow:var(--sh-md);
  padding:44px 38px 30px; text-align:center; position:relative; }
.auth-martin { width:150px; margin:-96px auto 4px; display:block;
  filter:drop-shadow(0 12px 22px rgba(27,59,43,.22)); animation:flota 3.4s ease-in-out infinite; }
@keyframes flota { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(2deg)} }
.auth-logo { width:56px; margin:0 auto 6px; display:block; }
.auth-card h1 { font-size:1.9rem; }
.slogan { color:var(--teal); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; margin:2px 0 22px; }
.auth-tabs { display:flex; background:var(--mint-soft); border-radius:999px; padding:5px; margin-bottom:22px; }
.auth-tabs button { flex:1; border:0; background:transparent; border-radius:999px; padding:10px; font-weight:800; color:var(--ink-soft); transition:.25s; }
.auth-tabs button.on { background:var(--forest); color:#fff; box-shadow:var(--sh-sm); }
.auth-form { text-align:left; display:grid; gap:14px; }
.auth-form label { font-weight:800; font-size:.86rem; color:var(--forest-deep); display:grid; gap:6px; }
.auth-form input, .auth-form select { border:2px solid var(--bruma); border-radius:14px; padding:13px 15px;
  font:inherit; background:#fdfdfb; transition:border .2s; width:100%; }
.auth-form input:focus, .auth-form select:focus { outline:none; border-color:var(--turquesa); }
.btn-go { border:0; background:linear-gradient(135deg,var(--turquesa),var(--teal)); color:#fff; font-weight:800;
  font-size:1.05rem; border-radius:999px; padding:14px; margin-top:4px; box-shadow:var(--sh-sm); transition:transform .2s; }
.btn-go:hover { transform:translateY(-2px); }
.err { color:var(--rojo); font-weight:700; font-size:.85rem; }
.nota { font-size:.76rem; color:var(--ink-soft); background:var(--mint-soft); border-radius:12px; padding:10px 12px; }
.demo-box { background:var(--mint-soft); border-radius:14px; padding:12px 14px; font-size:.78rem; color:var(--ink-soft); }
.demo-box code { background:#fff; border-radius:6px; padding:1px 6px; font-weight:700; }
#demoChips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#demoChips button { border:1.5px solid var(--teal); color:var(--forest-deep); background:#fff;
  border-radius:999px; padding:4px 11px; font-size:.74rem; font-weight:800; }
#demoChips button:hover { background:var(--mint); }
.volver { margin-top:18px; font-size:.82rem; } .volver a { color:var(--ink-soft); text-decoration:none; }

/* ─────────── SHELL ─────────── */
.topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  background:rgba(255,253,246,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--bruma); padding:10px 18px; }
.hamb { border:0; background:transparent; font-size:1.5rem; color:var(--forest-deep); display:none; }
.brand { display:flex; align-items:center; gap:9px; font-size:1.05rem; }
.brand img { width:34px; } .brand b { color:var(--forest); }
.top-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.streak-pill,.fish-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 13px;
  font-size:.86rem; font-weight:800; }
.streak-pill { background:#FDF2DC; color:#8a5b00; } .streak-pill .ico{color:#E8830C}
.fish-pill { background:#E0F4F1; color:#02655b; } .fish-pill .ico{color:var(--turquesa)}
.avatar-mini { width:42px; height:42px; border-radius:50%; border:2.5px solid var(--teal); padding:0; overflow:hidden; background:var(--mint); }
.avatar-mini img { width:100%; height:100%; object-fit:cover; }

.layout { display:grid; grid-template-columns:262px 1fr; min-height:calc(100vh - 63px); }
.sidebar { background:var(--white); border-right:1px solid var(--bruma); padding:20px 14px; display:flex; flex-direction:column; gap:4px; }
.side-user { display:flex; gap:11px; align-items:center; padding:10px 12px 18px; }
.side-user img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--mint); }
.side-user b { display:block; font-size:.95rem; } .side-user small { color:var(--ink-soft); font-size:.72rem; font-weight:700; }
.mitem { display:flex; align-items:center; gap:12px; width:100%; border:0; background:transparent; text-align:left;
  padding:12px 14px; border-radius:14px; font-weight:800; font-size:.92rem; color:var(--ink-soft); transition:.2s; }
.mitem .ico { width:20px; height:20px; color:var(--teal); }
.mitem:hover { background:var(--mint-soft); color:var(--forest-deep); }
.mitem.on { background:linear-gradient(135deg,var(--turquesa),var(--teal)); color:#fff; box-shadow:var(--sh-sm); }
.mitem.on .ico { color:#fff; }
.salir { margin-top:auto; display:flex; gap:10px; align-items:center; border:0; background:transparent;
  color:var(--ink-soft); font-weight:800; padding:12px 14px; border-radius:14px; }
.salir:hover { background:#fbeeee; color:var(--rojo); }
.vista { padding:30px clamp(16px,4vw,44px); max-width:1120px; width:100%; margin:0 auto; }

/* ─────────── DASHBOARD ─────────── */
.saludo-hero { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  background:linear-gradient(120deg,#eaf6ef,#e2f3f0); border-radius:26px; padding:26px 30px; margin-bottom:26px; position:relative; overflow:hidden; }
.martin-avatar { width:150px; position:relative; z-index:1; transition:filter .6s; }
.martin-avatar.feliz { animation:flota 3.2s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(0,168,150,.45)) saturate(1.15); }
.martin-avatar.triste { filter:grayscale(.55) brightness(.94); animation:quieto 5s ease-in-out infinite; }
@keyframes quieto { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.saludo-hero h2 { font-size:clamp(1.3rem,3vw,1.8rem); margin-bottom:6px; }
.saludo-hero p { color:var(--ink-soft); font-weight:600; max-width:52ch; }
.nivel-wrap { margin-top:14px; max-width:420px; }
.nivel-wrap .tag { font-size:.74rem; font-weight:800; color:var(--teal); letter-spacing:.06em; }
.barra { height:14px; background:#fff; border-radius:999px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.08); margin-top:5px; }
.barra > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--turquesa),var(--verde)); transition:width .8s cubic-bezier(.3,1,.4,1); }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.panel { background:var(--white); border-radius:var(--radius); box-shadow:var(--sh-sm); padding:24px; }
.panel h3 { display:flex; align-items:center; gap:10px; font-size:1.12rem; margin-bottom:14px; }
.panel h3 .ico { color:var(--teal); width:22px; height:22px; }

/* check-in de ánimo */
.mood-row { display:flex; gap:10px; flex-wrap:wrap; }
.mood { flex:1 1 76px; border:2.5px solid var(--bruma); background:#fdfdfb; border-radius:18px; padding:13px 6px 10px;
  display:grid; place-items:center; gap:5px; font-size:.72rem; font-weight:800; color:var(--ink-soft); transition:.22s; }
.mood svg { width:34px; height:34px; }
.mood:hover { transform:translateY(-3px); border-color:var(--teal); }
.mood.sel { border-color:var(--turquesa); background:var(--mint-soft); color:var(--forest-deep); box-shadow:var(--sh-sm); }
.checkin-done { display:flex; gap:14px; align-items:center; background:var(--mint-soft); border-radius:16px; padding:16px; font-weight:700; color:var(--forest-deep); }
.checkin-done .ico { width:30px; height:30px; color:var(--verde); flex:0 0 auto; }

/* mapa de avance */
.mapa { display:flex; align-items:center; gap:0; overflow-x:auto; padding:14px 4px 6px; }
.hito { display:grid; place-items:center; gap:7px; min-width:86px; text-align:center; font-size:.68rem; font-weight:800; color:var(--ink-soft); }
.hito .nodo { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--bruma); color:#9aa8a0; transition:.3s; }
.hito .nodo svg { width:24px; height:24px; }
.hito.done .nodo { background:linear-gradient(135deg,var(--turquesa),var(--teal)); color:#fff; box-shadow:0 6px 14px rgba(0,168,150,.35); }
.hito.next .nodo { background:#fff; border:3px dashed var(--teal); color:var(--teal); animation:pulsa 1.6s infinite; }
@keyframes pulsa { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.tramo { flex:1 1 34px; min-width:26px; height:5px; border-radius:99px; background:var(--bruma); margin:0 2px 26px; }
.tramo.done { background:linear-gradient(90deg,var(--forest),var(--turquesa)); }

/* recompensa del día */
.reco-card { display:grid; gap:10px; justify-items:start; }
.reco-card .btn-go { margin:0; padding:12px 26px; font-size:.95rem; }
.candado { color:var(--ink-soft); font-weight:700; font-size:.9rem; display:flex; gap:8px; align-items:center; }

/* ─────────── VISTAS GENÉRICAS ─────────── */
.vhead { margin-bottom:22px; }
.vhead h2 { font-size:1.65rem; display:flex; gap:12px; align-items:center; }
.vhead h2 .ico { color:var(--teal); }
.vhead p { color:var(--ink-soft); font-weight:600; max-width:70ch; margin-top:4px; }
.lista-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.mini-card { background:var(--white); border-radius:18px; box-shadow:var(--sh-sm); padding:20px; transition:.25s; position:relative; }
.mini-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.mini-card h4 { font-size:1rem; margin:10px 0 4px; }
.mini-card p { font-size:.82rem; color:var(--ink-soft); }
.mini-card .tag { position:absolute; top:14px; right:14px; font-size:.64rem; font-weight:800; background:var(--mint); color:var(--forest); border-radius:99px; padding:3px 9px; }
.mini-card.locked { opacity:.55; } .mini-card.locked:hover { transform:none; }
.tesela { width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(142deg,#e4f2ea,#c8e3d9); color:var(--forest-deep); }
.tesela svg { width:25px; height:25px; }

/* tamizaje */
.tamiz-q { background:var(--white); border-radius:16px; box-shadow:var(--sh-sm); padding:18px 20px; margin-bottom:12px; }
.tamiz-q p { font-weight:800; margin-bottom:10px; }
.tamiz-opts { display:flex; flex-wrap:wrap; gap:8px; }
.tamiz-opts label { border:2px solid var(--bruma); border-radius:999px; padding:8px 14px; font-size:.8rem; font-weight:800;
  color:var(--ink-soft); cursor:pointer; transition:.2s; }
.tamiz-opts label:has(input:checked) { background:var(--forest); border-color:var(--forest); color:#fff; }
.tamiz-opts input { display:none; }
.resultado { border-radius:var(--radius); padding:26px; color:#fff; box-shadow:var(--sh-md); }
.resultado.verde { background:linear-gradient(135deg,#2e7d4f,#3FA34D); }
.resultado.ambar { background:linear-gradient(135deg,#c78a00,#E8B430); }
.resultado.rojo  { background:linear-gradient(135deg,#a63430,#D9534F); }
.resultado h3 { color:#fff; } .resultado p { opacity:.94; margin-top:6px; font-weight:600; }
.resultado a { color:#fff; }

/* estadísticas */
.chart-box { background:var(--white); border-radius:var(--radius); box-shadow:var(--sh-sm); padding:22px; }
.chart-box canvas { width:100%; height:180px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.kpi { background:var(--white); border-radius:16px; box-shadow:var(--sh-sm); padding:18px; text-align:center; }
.kpi b { font-family:var(--font-d); font-size:1.9rem; color:var(--forest); display:block; }
.kpi span { font-size:.74rem; font-weight:800; color:var(--ink-soft); }

/* herramientas: respiración */
.resp-stage { display:grid; place-items:center; gap:18px; padding:20px; }
.resp-circle { width:190px; height:190px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle, #d9f0ec 0%, #b9e3dc 100%); box-shadow:0 0 0 14px rgba(0,168,150,.1); }
.resp-circle img { width:110px; }
.resp-circle.anim { animation:respira 16s ease-in-out infinite; }
@keyframes respira { 0%{transform:scale(.82)} 25%{transform:scale(1.12)} 50%{transform:scale(1.12)} 75%{transform:scale(.82)} 100%{transform:scale(.82)} }
.resp-label { font-family:var(--font-d); font-size:1.25rem; color:var(--teal); min-height:1.6em; font-weight:700; }
.fonos { display:grid; gap:10px; }
.fono { display:flex; align-items:center; gap:12px; background:var(--forest); color:#fff; border-radius:16px;
  padding:15px 18px; text-decoration:none; font-weight:800; transition:transform .2s; }
.fono:hover { transform:translateY(-2px); }
.fono.sec { background:var(--teal); }
.fono .ico { width:22px; height:22px; }

/* panel gestor */
.alerta { display:flex; gap:12px; align-items:flex-start; border-radius:16px; padding:15px 17px; font-size:.9rem; font-weight:600; margin-bottom:10px; }
.alerta .ico { width:22px; height:22px; flex:0 0 auto; margin-top:2px; }
.alerta.roja { background:#FBEBEA; color:#7c2320; } .alerta.roja .ico{color:var(--rojo)}
.alerta.ambar { background:#FDF4DC; color:#6d4d00; } .alerta.ambar .ico{color:#c78a00}
.alerta.info { background:var(--mint-soft); color:var(--forest-deep); } .alerta.info .ico{color:var(--teal)}
.tabla { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sh-sm); }
.tabla th { background:var(--forest-deep); color:#fff; font-size:.78rem; letter-spacing:.05em; padding:12px 14px; text-align:left; }
.tabla td { padding:12px 14px; border-bottom:1px solid var(--mint-soft); font-size:.88rem; font-weight:600; }
.tabla tr:last-child td { border:0; }
.pill { border-radius:99px; padding:3px 11px; font-size:.72rem; font-weight:800; }
.pill.v { background:#E5F4E8; color:#1f6b33; } .pill.a { background:#FDF4DC; color:#8a6300; } .pill.r { background:#FBEBEA; color:#a03330; }
.pill.lock { background:var(--bruma); color:var(--ink-soft); }

/* minijuegos */
.memo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:420px; margin:10px auto; }
.memo-c { aspect-ratio:1; border-radius:14px; border:0; background:linear-gradient(135deg,var(--turquesa),var(--teal));
  display:grid; place-items:center; color:#fff; font-size:1.5rem; transition:transform .3s; }
.memo-c svg { width:32px; height:32px; opacity:0; transition:opacity .2s; }
.memo-c.up { background:#fff; box-shadow:var(--sh-sm); border:2px solid var(--mint); color:var(--forest); transform:rotateY(180deg); }
.memo-c.up svg { opacity:1; }
.memo-c.ok { background:var(--mint); border:2px solid var(--verde); }
.semillas-stage { position:relative; height:300px; background:linear-gradient(180deg,#eaf6ef,#dff0ec); border-radius:var(--radius); overflow:hidden; }
.semilla { position:absolute; border:0; background:transparent; font-size:1.7rem; transition:transform .15s; color:var(--forest); }
.semilla svg { width:30px; height:30px; }
.semilla:hover { transform:scale(1.25); }
.juego-hud { display:flex; justify-content:space-between; font-weight:800; color:var(--forest-deep); margin:8px 2px; }

/* modal */
.modal { position:fixed; inset:0; background:rgba(27,59,43,.45); display:grid; place-items:center; z-index:90; padding:16px; }
.modal-card { background:var(--white); border-radius:24px; max-width:520px; width:100%; max-height:88vh; overflow:auto;
  padding:30px; box-shadow:var(--sh-md); text-align:center; position:relative; }
.modal-card h3 { margin-bottom:8px; }
.modal-card .cerrar { position:absolute; top:12px; right:14px; border:0; background:var(--mint-soft); border-radius:50%;
  width:34px; height:34px; font-size:1rem; color:var(--forest-deep); }
.modal-card img.martin { width:130px; margin:0 auto 8px; display:block; }

/* perfil */
.perfil-grid { display:grid; gap:16px; max-width:480px; }
.foto-opts { display:flex; gap:10px; flex-wrap:wrap; }
.foto-opts button { width:64px; height:64px; border-radius:50%; overflow:hidden; border:3px solid transparent; padding:0; background:var(--mint-soft); }
.foto-opts button img { width:100%; height:100%; object-fit:cover; }
.foto-opts button.sel { border-color:var(--turquesa); }

@media (max-width:880px) {
  .tabla { display:block; overflow-x:auto; white-space:nowrap; }
  .layout { grid-template-columns:1fr; }
  .hamb { display:block; }
  .sidebar { position:fixed; inset:63px auto 0 0; width:min(300px,84vw); z-index:50; transform:translateX(-105%);
    transition:transform .3s; box-shadow:var(--sh-md); }
  .sidebar.open { transform:none; }
  .saludo-hero { grid-template-columns:1fr; text-align:center; }
  .martin-avatar { margin:0 auto; width:120px; }
  .nivel-wrap { margin-inline:auto; }
  .memo-grid { max-width:100%; }
}

/* ── Súper Administradora ── */
.avatar-mini.admin, #fotoSide.admin { border-color:var(--gold); box-shadow:0 0 0 2px rgba(232,180,48,.35); }
.admin-martin { filter:drop-shadow(0 0 20px rgba(232,180,48,.55)) saturate(1.12) !important; }

/* Micro-ejercicio de respiración (contención automática) */
.resp-caja { text-align:center; margin-top:14px; }
.resp-circulo { width:64px; height:64px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7cc6c0, var(--turquesa, #2D9596));
  transition:transform 3.8s ease-in-out; box-shadow:0 8px 22px rgba(45,149,150,.35); }
.resp-circulo.crece { transform:scale(1.55); }
.resp-circulo.achica { transform:scale(1); }
.resp-circulo.quieto { }

/* ═══ Check-in WHO-5 — escenario austral ═══ */
.who5-escena { text-align:center; border-radius:18px; padding:22px 14px 16px; margin:-6px;
  background:linear-gradient(180deg,#dff0ec 0%,#eaf3e6 46%,#f7f4e6 100%); position:relative; overflow:hidden; }
.who5-escena::before { content:""; position:absolute; left:-10%; right:-10%; bottom:-18px; height:90px;
  background:radial-gradient(60% 100% at 25% 100%, #b9d3ad 0 60%, transparent 61%),
             radial-gradient(55% 90% at 75% 100%, #9ec49b 0 55%, transparent 56%); opacity:.6; }
.who5-escena > * { position:relative; }
.who5-martin { font-weight:700; color:var(--forest-deep); font-size:.92rem; margin-top:6px; }
.who5-prog { display:flex; gap:8px; justify-content:center; margin:12px 0 4px; }
.who5-prog i { width:11px; height:11px; border-radius:50%; background:#cfdcc9; transition:all .3s; }
.who5-prog i.on { background:var(--turquesa); transform:scale(1.3); }
.who5-prog i.done { background:var(--forest); }
.who5-opts { display:grid; gap:8px; margin-top:14px; }
.who5-opt { border:2px solid rgba(31,90,61,.18); background:#fff; border-radius:999px; padding:11px;
  font:inherit; font-weight:700; color:var(--ink); cursor:pointer; transition:all .18s; }
.who5-opt:hover { border-color:var(--forest); background:var(--mint); transform:translateY(-1px); }

/* Herramientas por estancia */
.tools-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:6px; }
.tool-card { text-align:left; background:var(--crema, #f8faf4); border:1.5px solid rgba(31,90,61,.1);
  border-radius:16px; padding:16px; font:inherit; cursor:pointer; display:grid; gap:6px;
  transition:transform .25s, box-shadow .25s; }
.tool-card:hover { transform:translateY(-4px); box-shadow:0 10px 22px rgba(31,90,61,.12); }
.tool-card b { font-size:.95rem; color:var(--ink); }
.tool-card p { font-size:.8rem; color:var(--ink-soft); margin:0; }
.tool-card .tesela { width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,#e4f2ea,#c8e3d9); color:var(--forest-deep); }

/* Reporte de energía */
.rep-graf { display:flex; gap:10px; justify-content:center; align-items:flex-end; min-height:110px; margin-top:12px; }
.rep-bar { display:grid; gap:4px; justify-items:center; }
.rep-bar i { display:block; width:22px; border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--turquesa),var(--forest)); }
.rep-bar span { font-size:.68rem; color:var(--ink-soft); font-weight:700; }
.btn-checkin { width:100%; }

/* Clima interno: selector de emoción */
.emo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.emo-card { border:2px solid rgba(31,90,61,.14); background:#fff; border-radius:14px; padding:10px 6px 8px;
  font:inherit; cursor:pointer; display:grid; gap:4px; justify-items:center; transition:all .18s; }
.emo-card img { width:56px; height:56px; object-fit:contain; }
.emo-card span { font-size:.72rem; font-weight:800; color:var(--ink); }
.emo-card:hover { border-color:var(--forest); background:var(--mint); transform:translateY(-2px) scale(1.03); }
.who5-skip { margin-top:12px; background:none; border:none; font:inherit; font-size:.78rem;
  color:var(--ink-soft); text-decoration:underline; cursor:pointer; }

/* Escala táctil amigable (básica): opciones grandes con icono */
.who5-opt.kid { padding:15px; font-size:1.02rem; display:flex; align-items:center; justify-content:center; gap:10px; }
.who5-opt.kid .ico { width:22px; height:22px; color:var(--turquesa); }

/* ═══════════════════════════════════════════════════
   MARTÍN AVATAR CONTAINER (v1.2 — transparencia real)
   Contenedor flotante: fondo transparente, sombra de
   suelo elíptica difuminada y drop-shadow del ave.
   ═══════════════════════════════════════════════════ */
.martin-stage-3d {
  position: relative;
  background: transparent;           /* CERO fondos sólidos */
  display: grid;
  place-items: center;
  width: clamp(180px, 38vw, 300px);  /* responsive fluido */
  margin-inline: auto;
  z-index: 2;                        /* flota sobre fondos, bajo modales */
  pointer-events: none;              /* no interfiere con botones/formularios */
}
.martin-stage-3d video,
.martin-stage-3d img {
  width: 100%;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;                  /* sin cuadro rígido cuando hay alfa */
  filter: drop-shadow(0 16px 26px rgba(27, 59, 43, 0.22));  /* profundidad 3D */
  pointer-events: auto;              /* el video sí es interactivo */
}
/* sombra de suelo: elipse difuminada bajo el ave */
.martin-stage-3d::after {
  content: "";
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(27, 59, 43, 0.20) 0%, rgba(27, 59, 43, 0) 70%);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}
/* iluminación cenital sutil */
.martin-stage-3d::before {
  content: "";
  position: absolute;
  top: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(0, 168, 150, 0.10) 0%, transparent 62%);
  z-index: -1;
  pointer-events: none;
}
/* fallback MP4 (fondo crema horneado): se integra en vez de cortar */
.martin-stage-3d video.mp4-fallback {
  border-radius: 22px;
  background: var(--cream);
  object-fit: cover;
  aspect-ratio: 9 / 16;
  max-height: 340px;
}
@media (max-width: 640px) {
  .martin-stage-3d { width: clamp(150px, 52vw, 220px); }
}