/* PlayRobótica: portada y página de vídeo. Mismo estilo que el panel de Robilab, pero más grande. */
@font-face {
  font-family: "Nunito PR"; src: url("../fuentes/Nunito.ttf") format("truetype");
  font-weight: 200 1000; font-display: swap;
}
:root {
  --fondo: #f4f8ff; --texto: #1d3557; --suave: #5b6b82; --borde: #d3def0; --acento: #855cd6; --acento-osc: #6a43c0;
  --hecho: #2a9d55; --tarjeta: #ffffff; --amarillo: #ffbf00; --azul: #4c97ff; --rosa: #cf63cf; --naranja: #ffab19;
  --sombra: 0 6px 0 rgba(29, 53, 87, .12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 21px/1.45 "Nunito PR", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
a { color: var(--acento-osc); }
button, .boton { font: inherit; }
.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* cabecera */
.cabecera-pr { background: var(--acento); color: #fff; box-shadow: var(--sombra); }
.cabecera-pr .envoltura { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.cabecera-pr img { width: 64px; height: 64px; flex: none; background: #fff; border-radius: 18px; padding: 6px; }
.cabecera-pr .nombre { font-size: 2.1rem; font-weight: 900; letter-spacing: .01em; line-height: 1; margin: 0; }
.cabecera-pr .nombre span { color: var(--amarillo); }
.cabecera-pr .lema { margin: 4px 0 0; font-size: 1.05rem; opacity: .95; }
.cabecera-pr .volver {
  margin-left: auto; color: #fff; text-decoration: none; font-weight: 800; background: rgba(255,255,255,.18);
  border-radius: 14px; padding: 10px 16px; white-space: nowrap;
}
.cabecera-pr .volver:hover { background: rgba(255,255,255,.3); }

/* botones grandes */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px;
  border: 0; border-radius: 16px; padding: 10px 20px; cursor: pointer; text-decoration: none;
  font-weight: 800; color: #fff; background: var(--acento); box-shadow: 0 5px 0 var(--acento-osc);
  transition: transform .08s, box-shadow .08s;
}
.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--acento-osc); }
.boton:focus-visible, .chip:focus-visible, .capitulo:focus-visible { outline: 4px solid var(--amarillo); outline-offset: 3px; }
.boton svg { width: 30px; height: 30px; flex: none; }
.boton.ver { background: #e8590c; box-shadow: 0 5px 0 #b8460a; }
.boton.ver:active { box-shadow: 0 1px 0 #b8460a; }
.boton.robilab { background: var(--acento); }
.boton.programar { background: var(--azul); box-shadow: 0 5px 0 #2f6fd0; }
.boton.programar:active { box-shadow: 0 1px 0 #2f6fd0; }
.boton.suave { background: var(--tarjeta); color: var(--texto); box-shadow: 0 4px 0 var(--borde); border: 2px solid var(--borde); }

.pie-pr { color: var(--suave); font-size: .85rem; padding: 28px 0 40px; text-align: center; }
.pie-pr p { margin: 4px 0; }

@media (max-width: 640px) {
  body { font-size: 19px; }
  .cabecera-pr .nombre { font-size: 1.6rem; }
  .cabecera-pr img { width: 48px; height: 48px; }
  .cabecera-pr .lema { display: none; }
}