/* ============================================================
   Aparicio · v3
   Afinado de identidad, jerarquía y piezas principales.
   ============================================================ */

:root{
  --papel:#f7f3ea;
  --papel-2:#efe8db;
  --papel-3:#e5dccb;
  --tinta:#1f1b16;
  --tinta-2:#5e564b;
  --tinta-3:#746a5d;
  --linea:#dcd3c3;
  --verde:#234437;
  --verde-2:#2f5747;
  --verde-suave:#e8efe9;
  --terra:#a9502c;
  --terra-suave:#f5e7de;
  --blanco:#fffdf9;
  --sombra:0 18px 44px -30px rgba(28,22,14,.35);
  --radio:12px;
  --barra-h:62px;
}

html{scroll-behavior:smooth}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  letter-spacing:0;
}
body::selection{background:#dbe6dd;color:var(--tinta)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- botones ---------- */
.btn{
  height:42px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid var(--linea);
  background:var(--blanco);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{border-color:var(--verde);background:#f0f5f1}
.btn:active{transform:none}
.btn-primario{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.btn-primario:hover{background:var(--verde-2);border-color:var(--verde-2)}
.btn-suave{background:transparent;border-color:var(--verde);color:var(--verde)}
.btn-suave:hover{background:var(--verde-suave)}
.btn-mini{height:36px;padding:0 13px;font-size:13px}
.btn-icono{
  width:38px;height:38px;padding:0;border-color:transparent;background:transparent;
  color:var(--tinta-2);border-radius:50%;
}
.btn-icono:hover{background:var(--papel-2);border-color:transparent;color:var(--tinta)}
.btn-icono svg{width:19px;height:19px;stroke-width:1.8}
.btn-fantasma{background:transparent;height:38px;padding:0 14px;font-size:13px}
.btn-ayuda{
  width:36px;height:36px;padding:0;border:0;background:transparent;
  border-radius:50%;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--tinta-3);
}
.btn-ayuda:hover{background:var(--papel-2);color:var(--tinta)}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px}

/* ---------- barra ---------- */
.barra{
  height:calc(var(--barra-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 20px 0;
  background:rgba(247,243,234,.94);
  border-bottom:1px solid rgba(220,211,195,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.marca{gap:10px}
.marca-sello{display:none}
.marca-texto strong{
  font-family:var(--serif);
  font-weight:600;
  font-size:24px;
  letter-spacing:.005em;
  line-height:1;
}
.marca-texto small{
  margin-top:4px;
  color:var(--tinta-3);
  font-size:9.5px;
  letter-spacing:.16em;
  font-weight:600;
  text-transform:uppercase;
}
.barra-acciones{gap:4px}
.barra-acciones .btn-fantasma{border:1px solid var(--linea);background:transparent}

/* ---------- pestañas ---------- */
.tabs{
  top:14px;
  gap:2px;
  padding:4px;
  border-radius:12px;
  border:1px solid var(--linea);
  background:rgba(255,253,249,.94);
  box-shadow:0 10px 28px -26px rgba(28,22,14,.55);
}
.tabs button{
  padding:8px 15px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--tinta-2);
}
.tabs button.activo{background:var(--verde);color:var(--blanco)}
.tabs button:not(.activo):hover{background:var(--papel-2);color:var(--tinta)}

/* ---------- vistas ---------- */
.vista{
  width:min(860px,100%);
  padding:96px 24px calc(48px + env(safe-area-inset-bottom));
  background:var(--papel);
}
.vista-cab{justify-content:flex-start;margin:0 0 20px}
.vista-cab h2{font-size:32px;letter-spacing:-.015em}

/* ---------- inicio ---------- */
.vista-inicio{width:min(1040px,100%);padding-top:104px}
.inicio-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);
  gap:64px;
  align-items:start;
  max-width:960px;
  margin:0 auto;
}
.inicio-principal{min-width:0}
.portada{text-align:left;padding:0}
.portada h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(64px,8.2vw,100px);
  line-height:.88;
  letter-spacing:-.02em;
  margin:0;
}
.portada-lema{
  font-size:19px;
  line-height:1.45;
  color:var(--tinta-2);
  max-width:28ch;
  margin:14px 0 0;
}
.portada-origen{
  font-family:var(--serif);
  font-size:15px;
  font-style:italic;
  color:var(--terra);
  letter-spacing:.01em;
  margin:12px 0 0;
  text-transform:none;
}
.inicio-datos{
  display:flex;
  justify-content:flex-start;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0;
  margin:26px 0 0;
  text-align:left;
}
.inicio-datos div{display:flex;align-items:baseline;gap:7px}
.inicio-datos div + div::before{
  content:"·";
  color:var(--tinta-3);
  margin:0 13px;
  font-size:14px;
}
.inicio-datos div strong{
  display:inline;
  font-family:var(--serif);
  font-size:25px;
  font-weight:600;
  line-height:1;
}
.inicio-datos div small{
  font-size:12.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--tinta-2);
}
.inicio-sueltas{margin:8px 0 0;text-align:left;font-size:13px}
.inicio-retratos{
  display:flex;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:0;
  margin:22px 0 0;
  min-height:46px;
  padding-left:2px;
}
.inicio-retratos img,.inicio-retratos span{
  width:46px;height:46px;
  margin-left:-10px;
  border:2px solid var(--papel);
  box-shadow:none;
  border-radius:50%;
}
.inicio-retratos > :first-child{margin-left:0}
.inicio-cta{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  margin:26px 0 0;
  max-width:340px;
}
.inicio-cta .btn{width:100%;height:52px;font-size:15px}
.inicio-cta .btn-suave{height:46px;font-size:14px}
.avisos{
  margin:14px 0 0;
  max-width:420px;
  padding:13px 14px;
  border:1px solid var(--linea);
  border-radius:12px;
  background:var(--blanco);
  gap:11px;
}
.avisos-ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:var(--verde-suave);color:var(--verde);
  display:grid;place-items:center;
}
.avisos-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.avisos-texto strong{font-family:var(--sans);font-size:14px;font-weight:600}
.avisos-texto p{font-size:12.5px;color:var(--tinta-2);line-height:1.4;margin:2px 0 0}
.avisos .btn{height:36px;padding:0 13px;font-size:12.5px}

.inicio-lateral{
  border-left:1px solid var(--linea);
  padding:2px 0 0 40px;
}
.inicio-titulo{
  font-family:var(--serif);
  font-size:27px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 14px;
}
.inicio-acciones{
  display:flex;
  flex-direction:column;
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:14px;
  overflow:hidden;
}
.accion{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:0;
  border-bottom:1px solid var(--linea);
  border-radius:0;
  background:transparent;
  text-align:left;
  position:static;
  transform:none!important;
}
.accion:last-child{border-bottom:0}
.accion:hover{background:#f3f7f3}
.accion::after{display:none}
.accion-ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:10px;
  background:var(--verde-suave);color:var(--verde);
  display:grid;place-items:center;
}
.accion-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.accion-juego .accion-ico{background:var(--terra-suave);color:var(--terra)}
.accion-txt{min-width:0;flex:1}
.accion-txt strong{
  display:block;
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  line-height:1.25;
}
.accion-txt small{
  display:block;
  margin-top:1px;
  color:var(--tinta-2);
  font-size:12.5px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.accion-flecha{color:var(--tinta-3);font-family:var(--serif);font-size:22px;line-height:1}
.inicio-pie{margin:16px 0 0;text-align:left;font-size:12.5px}
.inicio-pie a{color:var(--tinta-2);text-underline-offset:3px}

/* ---------- árbol ---------- */
.f3 div.card-inner{
  border:1px solid var(--linea);
  border-radius:10px;
  background:var(--blanco);
  box-shadow:none;
}
.f3 div.card-male .card-inner,
.f3 div.card-female .card-inner,
.f3 div.card-genderless .card-inner{background:var(--blanco);box-shadow:none}
.f3 div.card-male .card-inner{border-top:3px solid var(--verde)}
.f3 div.card-female .card-inner{border-top:3px solid var(--terra)}
.f3 div.card-main .card-inner{outline:2px solid var(--verde);outline-offset:2px;box-shadow:none}
.f3 div.card:hover .card-inner{box-shadow:0 4px 10px -8px rgba(28,22,14,.5)}
.f3 div.card-image-rect div.card-label{
  background:transparent;
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.12;
  letter-spacing:0;
  padding:0 5px;
}
.f3 div.card-image-rect div.card-label > div:first-child{font-weight:600}
.f3 div.card-image-rect div.card-label > div:last-child{font-size:12px;color:var(--tinta-2);margin-top:2px}
.f3 .person-icon{
  width:48px;height:48px;border-radius:8px;background:var(--papel-2);
  color:var(--tinta-3);display:grid;place-items:center;
}
.f3 .person-icon svg{width:30px;height:30px}
.f3 .link{stroke:#cfc5b3!important;stroke-width:1.2!important}
.f3 .link.f3-path-to-main{stroke:var(--verde)!important;stroke-width:2!important}
.f3 .card-main-outline{stroke:var(--verde);stroke-width:1.5;opacity:.2}
.controles{border-radius:12px;box-shadow:0 8px 24px -22px rgba(28,22,14,.6)}
.controles button{border-radius:8px}
.pie{background:rgba(247,243,234,.9)}

/* ---------- ficha ---------- */
.panel{width:min(480px,100%);padding:20px 24px calc(40px + env(safe-area-inset-bottom))}
.panel-cerrar{border-color:var(--linea);background:var(--blanco)}
.ficha-cab{display:flex;align-items:flex-start;gap:16px;margin:2px 0 8px}
.ficha-foto{
  width:92px;height:92px;flex:0 0 92px;border-radius:12px;
  background:var(--papel-2);border:1px solid var(--linea);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:38px;color:var(--tinta-3);
}
.ficha-id{min-width:0;padding-top:2px}
.ficha-id h2{font-size:30px;line-height:1.03;margin:0 0 5px;letter-spacing:-.015em}
.ficha-id .fechas{margin:0 0 4px}
.ficha-id .lugar{margin:0}
.ficha-media{position:relative;margin:0 0 16px}
.ficha-media .retrato{aspect-ratio:16/10;margin:0;border-radius:12px}
.ficha-media .btn-foto{
  position:absolute;right:10px;bottom:10px;
  width:auto;height:34px;margin:0;padding:0 12px;font-size:12.5px;
  background:rgba(255,253,249,.94);border-color:rgba(255,253,249,.94);
  backdrop-filter:blur(6px);
}
.panel h2{font-size:30px}
.panel .fechas{font-size:14.5px}
.panel .apodo{color:var(--tinta-2);font-size:.48em}
.panel .oficio{font-size:13.5px;margin:-2px 0 12px}
.panel .bio{font-family:var(--sans);font-size:15px;line-height:1.55;color:#3a322a;margin:12px 0 16px}
.seccion{color:var(--tinta-3);font-size:10.5px;letter-spacing:1.1px;margin:18px 0 7px}
.chip{
  border-radius:8px;
  background:var(--papel);
  border-color:var(--linea);
  padding:7px 11px;
  font-size:13.5px;
}
.chip:hover{background:var(--verde-suave);border-color:var(--verde)}
.chip .rol{color:var(--tinta-3);font-size:9.5px}
.galeria{grid-template-columns:repeat(3,1fr);gap:6px}
.galeria img{border-radius:8px}
.retrato-vacio{display:none}
.panel-acciones{grid-template-columns:1fr 1fr;gap:8px;margin-top:22px;padding-top:18px}
.panel-acciones .btn{height:48px;font-size:13.5px}
.btn-foto{height:34px;font-size:12.5px;margin:8px 0 0;width:auto;padding:0 12px;align-self:flex-start}

/* ---------- calendario ---------- */
.mes-titulo h2{font-size:36px;letter-spacing:-.015em}
.mes-titulo small{color:var(--terra);font-size:12px;letter-spacing:.12em;font-weight:600}
.mes-flecha{width:40px;height:40px;border-color:var(--linea);background:var(--blanco)}
.calendario{max-width:560px;margin:0 auto 18px;gap:3px}
.calendario .dow{font-size:9.5px;color:var(--tinta-3)}
.calendario .dia{
  border-radius:8px;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--tinta-2);
  min-height:44px;
  justify-content:flex-start;
  padding-top:6px;
}
.calendario .dia.hoy{border-color:var(--verde);background:var(--verde-suave);color:var(--verde)}
.calendario .dia.con{background:var(--terra-suave);border-color:#ecd3c4;color:var(--tinta)}
.calendario .dia.con:hover{background:#efd9cc}
.calendario .dia .puntos i{background:var(--terra);width:5px;height:5px}
.lista-cumples{max-width:560px;margin:0 auto;gap:6px}
.cumple{padding:10px 12px;border-radius:10px}
.cumple .dia-num{font-size:26px}
.cumple .avatar{width:42px;height:42px;flex-basis:42px}
.cumple strong{font-size:15px}
.cumple small{font-size:12px}
.cumple .edad{font-size:14px;color:var(--tinta-2)}
.vacio-cumples{padding:30px 18px;border-radius:12px}

/* ---------- muro ---------- */
.muro-intro{max-width:46ch;margin:-8px auto 16px;text-align:center;font-size:13.5px;line-height:1.5}
.muro-form{
  border-radius:14px;
  padding:14px;
  margin-bottom:20px;
  background:var(--blanco);
  border:1px solid var(--linea);
}
.muro-form textarea{
  min-height:78px;
  padding:6px 4px;
  font-size:15.5px;
  line-height:1.5;
  resize:none;
}
.muro-form-pie{padding:0;margin-top:8px;align-items:center;border-top:1px solid var(--linea);padding-top:10px}
.muro-adjuntar{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--verde);text-decoration:none;font-weight:600;
  max-width:60%;
}
.muro-adjuntar::before{content:"+";font-size:18px;line-height:1;font-weight:400}
.muro-adjuntar:hover{text-decoration:underline;text-underline-offset:3px}
.muro-form .btn-primario{height:38px;font-size:13.5px;padding:0 16px}
.muro-lista{gap:10px}
.post{border-radius:14px;padding:16px;border:1px solid var(--linea)}
.post header{gap:11px;margin-bottom:9px}
.post-avatar{width:42px;height:42px;flex-basis:42px;font-size:18px}
.post-quien strong{font-size:14px}
.post-quien small{font-size:11px}
.post-borrar{font-size:19px;color:var(--tinta-3);padding:4px 6px}
.post-texto{font-size:15.5px;line-height:1.55;margin-bottom:10px;color:#3a322a}
.post-foto,.post-video{border-radius:10px;max-height:560px;object-fit:cover}

/* ---------- fotos ---------- */
.mosaico{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.mosaico figure{border-radius:10px}
.mosaico figure:hover img{transform:scale(1.03)}
.mosaico figcaption{font-size:12px;padding:28px 9px 8px}
.vacio-fotos{
  grid-column:1/-1;
  border:1px dashed var(--linea);
  border-radius:14px;
  background:var(--blanco);
  padding:46px 22px;
  text-align:center;
}
.vacio-fotos svg{width:34px;height:34px;fill:none;stroke:var(--tinta-3);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.vacio-fotos strong{display:block;font-family:var(--serif);font-size:23px;font-weight:600;margin-bottom:3px}
.vacio-fotos p{margin:0 auto;color:var(--tinta-2);font-size:13.5px;max-width:36ch;line-height:1.5}

/* ---------- modales y formularios ---------- */
.modal-caja{border-radius:16px;padding:26px 26px 24px}
.modal h2{font-size:28px;letter-spacing:-.015em}
.modal .intro{font-size:14px;line-height:1.5}
.campo label{font-size:11px;letter-spacing:.6px}
.campo input,.campo textarea,.campo select{
  border-radius:9px;
  background:var(--papel);
  border-color:var(--linea);
  height:48px;
  font-size:15px;
}
.campo textarea{height:auto;min-height:96px}
.campo input:focus,.campo textarea:focus,.campo select:focus{background:var(--blanco);border-color:var(--verde)}
.modal-pie .btn{height:46px}
.progreso i{height:3px}
.resultado{border-radius:9px}
.resultado:hover{background:var(--papel)}
.soltar{border-radius:12px;background:var(--blanco)}

/* ---------- juego ---------- */
.juego-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 4px}
.juego-head h2{margin:0}
.juego-intro{color:var(--tinta-2);font-size:13.5px;line-height:1.5;margin:0 0 16px;max-width:46ch}
.juego-lista{display:flex;flex-direction:column;gap:8px}
.juego-opcion{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 14px;
  border:1px solid var(--linea);border-radius:10px;background:var(--blanco);
  text-align:left;cursor:pointer;
}
.juego-opcion:hover{border-color:var(--verde);background:var(--verde-suave)}
.juego-opcion[disabled]{opacity:.5;pointer-events:none}
.juego-opcion .ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
  background:var(--verde-suave);color:var(--verde);display:grid;place-items:center;font-family:var(--serif);font-size:18px;
}
.juego-opcion strong{display:block;font-size:14.5px}
.juego-opcion small{display:block;color:var(--tinta-2);font-size:12px;line-height:1.3}
.juego-opcion .juego-marca{margin-left:auto;color:var(--tinta-3);font-size:11px;white-space:nowrap}
.juego-ranking{margin-top:18px;border-top:1px solid var(--linea);padding-top:14px}
.juego-ranking h3{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 8px}
.juego-fila{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px;border-bottom:1px solid rgba(220,211,195,.6)}
.juego-fila:last-child{border-bottom:0}
.juego-fila .puesto{width:22px;flex:0 0 22px;font-family:var(--serif);font-size:16px;color:var(--tinta-3);text-align:center}
.juego-fila .puesto.top{color:var(--terra);font-weight:600}
.juego-fila .nombre{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.juego-fila .puntos{font-weight:600;color:var(--verde)}
.juego-fila.yo{background:var(--verde-suave);margin:0 -8px;padding:7px 8px;border-radius:7px;border-bottom:0}
.juego-vacio{color:var(--tinta-3);font-size:12.5px;padding:6px 0}
.juego-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px}
.juego-barra .tiempo,.juego-barra .marcador{font-size:12px;color:var(--tinta-2);font-weight:600;letter-spacing:.03em}
.juego-barra .tiempo b,.juego-barra .marcador b{font-family:var(--serif);font-size:20px;color:var(--tinta);font-weight:600}
.juego-progreso{height:4px;background:var(--papel-2);border-radius:2px;margin:0 0 18px;overflow:hidden}
.juego-progreso i{display:block;height:100%;background:var(--verde);border-radius:2px;transition:width .25s ease}
.juego-pregunta{font-family:var(--serif);font-size:29px;line-height:1.12;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
.juego-foto{width:100%;max-height:240px;object-fit:cover;border-radius:12px;margin:0 0 16px;background:var(--papel-2)}
.juego-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.juego-opts .btn{
  height:56px;font-size:14.5px;white-space:normal;text-align:left;line-height:1.25;
  padding:8px 12px;justify-content:flex-start;border-radius:10px;
}
.juego-opts .btn.correcta{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.juego-opts .btn.fallada{background:var(--terra-suave);border-color:var(--terra);color:var(--terra)}
.juego-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.juego-racha{font-size:12px;color:var(--terra);font-weight:600}
.juego-resultado{text-align:center;padding:10px 0 0}
.juego-resultado > .puntos{
  font-family:var(--serif);font-size:74px;line-height:1;color:var(--verde);font-weight:600;letter-spacing:-.03em;
}
.juego-resultado > .etiqueta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin:4px 0 12px}
.juego-resultado h2{font-size:30px;margin:0 0 4px}
.juego-resultado p{color:var(--tinta-2);font-size:14px;margin:0 auto 14px;max-width:34ch}
.juego-resultado .rango{display:inline-flex;align-items:center;gap:7px;background:var(--verde-suave);color:var(--verde);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;margin-bottom:16px}
.juego-resultado .acciones{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.juego-resultado .acciones .btn{min-width:132px}
.juego-nombre{display:flex;gap:8px;margin:12px 0 0}
.juego-nombre input{
  flex:1;height:44px;border:1px solid var(--linea);border-radius:9px;background:var(--papel);
  padding:0 12px;font:inherit;font-size:14px;outline:none;
}
.juego-nombre input:focus{border-color:var(--verde);background:var(--blanco)}
.juego-nombre .btn{height:44px}
.juego-ranking-full{max-height:52vh;overflow-y:auto;margin-top:6px}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .inicio-grid{grid-template-columns:1fr;gap:30px;max-width:560px}
  .inicio-lateral{border-left:0;padding:0}
  .vista-inicio{padding-top:28px}
  .portada{text-align:center}
  .portada h1{font-size:clamp(58px,17vw,78px)}
  .portada-lema{font-size:16.5px;margin-left:auto;margin-right:auto;max-width:27ch}
  .portada-origen{font-size:14px}
  .inicio-datos{justify-content:center}
  .inicio-retratos{justify-content:center}
  .inicio-cta{max-width:none;align-items:stretch}
  .avisos{max-width:none}
  .inicio-titulo{text-align:center;font-size:24px;margin-top:4px}
  .inicio-pie{text-align:center}
  .vista{padding:28px 16px calc(92px + env(safe-area-inset-bottom))}
  .vista-cab{justify-content:center;margin-bottom:14px}
  .vista-cab h2{font-size:27px}
}
@media (max-width:720px){
  :root{--barra-h:58px}
  .barra{padding:env(safe-area-inset-top) 14px 0}
  .marca-texto strong{font-size:22px}
  .marca-texto small{display:none}
  .barra-acciones{gap:1px}
  .btn-icono{width:36px;height:36px}
  .btn-fantasma{padding:0 11px;height:36px;font-size:12.5px}
  .btn-ayuda{width:34px;height:34px}
  .tabs{
    top:auto;bottom:0;left:0;right:0;transform:none;
    border-radius:0;border:0;border-top:1px solid var(--linea);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom));
    background:rgba(255,253,249,.98);
    box-shadow:0 -8px 24px -22px rgba(28,22,14,.4);
    justify-content:space-around;
  }
  .tabs button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:5px 2px;font-size:10px;border-radius:8px;
  }
  .tabs .tab-ico{display:block;width:20px;height:20px}
  .tabs button.activo{background:transparent;color:var(--verde)}
  .tabs button.activo .tab-ico{stroke-width:2.1}
  .vista-inicio{padding-top:22px}
  .portada h1{font-size:clamp(54px,16.5vw,72px)}
  .portada-lema{font-size:16px}
  .inicio-datos{margin-top:22px}
  .inicio-datos div strong{font-size:23px}
  .inicio-datos div small{font-size:12px}
  .inicio-retratos img,.inicio-retratos span{width:44px;height:44px}
  .inicio-cta{margin-top:22px}
  .accion{padding:12px 13px}
  .accion-txt small{white-space:normal;overflow:visible;text-overflow:clip}
  .modal-caja{border-radius:18px 18px 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom))}
  .panel{height:92vh;padding:16px 18px calc(28px + env(safe-area-inset-bottom))}
  .ficha-foto{width:78px;height:78px;flex-basis:78px;font-size:32px}
  .ficha-id h2{font-size:26px}
  .ficha-media .retrato{aspect-ratio:4/3}
  .mosaico{grid-template-columns:repeat(2,1fr);gap:6px}
  .juego-pregunta{font-size:25px}
  .juego-opts .btn{height:54px;font-size:14px}
  .juego-resultado > .puntos{font-size:64px}
  .juego-nombre{flex-direction:column}
  .juego-nombre .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .juego-opts .btn,.juego-progreso i{transition:none}
}
.accion{flex-direction:row}
.btn-icono span{display:none}
.vista-inicio{max-width:1040px}
@media (max-width:900px){.inicio-sueltas{text-align:center}}
.juego-head,.juego-barra{padding-right:54px}
.juego-opcion .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.juego-nombre{flex-direction:row;align-items:stretch}
.juego-nombre input{outline:0}
.juego-nombre .btn{flex:0 0 auto;min-width:88px;font-size:13px;padding:0 12px}
.juego-resultado .acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:360px;margin:0 auto}
.juego-resultado .acciones .btn{min-width:0}
.juego-resultado .acciones .btn:first-child{grid-column:1/-1}
@media (max-width:720px){
  .juego-nombre{flex-direction:row}
  .juego-nombre .btn{width:auto}
}
.juego-head{padding-right:44px}
.juego-nombre input:focus-visible{outline:none}
#modalCuerpo:focus{outline:none}
.accion-txt small{white-space:normal;overflow:visible;text-overflow:clip}