/* La miniweb de FamiTask: lo común a todas las páginas (colores, letra, cabecera y pie). */
/* Paleta: editorial y adulta por defecto (--naranja y --oro ya no son los colores
   de marca saturados, son acentos atenuados). El naranja y el dorado de marca
   originales quedan aparte, en --naranja-viva/--oro-vivo, para los rincones donde
   sí queremos que se note que esto lo usan niños (ver home.html, bloque "Los peques"). */
:root { --cielo:#F8F3E9; --nieve:#FFFFFF; --crema:#F0E8D9; --choco:#2B2217; --suave:#6E6252; --naranja:#B9502A; --naranja-texto:#8C3C1E; --oro:#C99A3E; --verde:#2F7D4F; --azul:#3B6EA5;
         --naranja-viva:#FF7A2F; --naranja-viva-texto:#C4501A; --oro-vivo:#FFC233; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--cielo); color:var(--choco); font:400 17px/1.6 "Nunito", system-ui, sans-serif; padding:0 16px 40px }
h1, h2, h3 { font-family:"Nunito", system-ui, sans-serif; font-weight:800; letter-spacing:-.01em; text-wrap:balance }
a { color:var(--naranja-texto); font-weight:700 }
a:focus-visible { outline:3px solid var(--azul); outline-offset:3px; border-radius:8px }
code { background:var(--crema); border-radius:6px; padding:1px 6px; font-size:.92em }

/* Cabecera: la marca, el menú y la descarga siempre a mano. */
.barra { max-width:1240px; margin:14px auto 0; background:var(--nieve); border-radius:999px; padding:8px 8px 8px 10px;
         display:flex; align-items:center; gap:8px; box-shadow:0 5px 0 rgba(74,50,32,.08) }
.barra .logo { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--choco); font-family:"Nunito", sans-serif; font-weight:800; letter-spacing:-.01em; font-size:20px; padding-right:6px }
.barra .logo .beta { font-family:"Nunito", sans-serif; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                     background:#DDEBFA; color:#2B6CB0; border-radius:999px; padding:2px 8px; margin-left:2px }
.barra .logo img { width:36px; height:36px; border-radius:50% }
.barra nav { display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none }
.barra nav::-webkit-scrollbar { display:none }
.barra nav a { white-space:nowrap; text-decoration:none; color:var(--suave); font-family:"Nunito", sans-serif; font-weight:700; font-size:16px; padding:8px 12px; border-radius:999px }
.barra nav a:hover { background:var(--crema); color:var(--choco) }
.barra nav a[aria-current="page"] { background:var(--crema); color:var(--naranja-texto) }
.barra .bajar { white-space:nowrap; text-decoration:none; background:var(--choco); color:#fff; font-family:"Nunito", sans-serif; font-weight:700; font-size:16px;
                border-radius:999px; padding:9px 18px; transition:background .15s ease, transform .15s ease }
.barra .bajar:hover { background:var(--naranja-texto) }
.barra .bajar:active { transform:translateY(1px) }

/* Selector de idioma: desplegable nativo (<details>), sin JS. */
.barra .idiomas { position:relative }
.barra .idiomas summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
                          font-family:"Nunito", sans-serif; font-weight:700; font-size:15px; color:var(--suave);
                          padding:8px 10px; border-radius:999px; white-space:nowrap }
.barra .idiomas summary::-webkit-details-marker, .barra .idiomas summary::marker { display:none }
.barra .idiomas summary:hover, .barra .idiomas[open] summary { background:var(--crema); color:var(--choco) }
.barra .idiomas .menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--nieve); border-radius:16px;
                        box-shadow:0 8px 24px rgba(74,50,32,.2); padding:6px; min-width:180px; z-index:30; display:grid; gap:1px }
.barra .idiomas .menu a { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--choco);
                          font-family:"Nunito", sans-serif; font-weight:600; font-size:15px; padding:8px 10px; border-radius:10px; white-space:nowrap }
.barra .idiomas .menu a:hover { background:var(--crema) }

/* Banderas: SVG reales (flag-icons, lipis, licencia MIT — ver img/banderas/ y el
   aviso legal), no emoji: los emoji de bandera no se ven en Chrome/Vivaldi/Edge en
   Windows (la fuente del sistema no trae esos glifos). Catalán, gallego y euskera
   llevan su propia bandera, no la de España (igual que en la app). */
.bandera { display:inline-block; width:18px; height:13px; border-radius:2px; box-shadow:0 0 0 1px rgba(74,50,32,.15); object-fit:cover; flex:none }
.barra .idiomas .menu a[aria-current="true"] { background:var(--crema); color:var(--naranja-texto) }

/* Movimiento: personalidad Playful (skill motion-design). Solo si el navegador
   no pide menos movimiento, y solo si el JS confirma que puede revelar en
   scroll (html.js-revelar); sin JS, todo se ve siempre, sin esperar a nadie. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes flotar { 0%, 100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
  @keyframes entrar-arriba { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }

  html.js-revelar .pasos .paso,
  html.js-revelar .dos .bloque,
  html.js-revelar .pantalla,
  html.js-revelar .instalar,
  html.js-revelar .pruebas,
  html.js-revelar .opina,
  html.js-revelar .instagram {
    opacity:0; transform:translateY(28px);
    transition:opacity .5s cubic-bezier(.22,.8,.36,1), transform .5s cubic-bezier(.22,.8,.36,1);
  }
  html.js-revelar .pasos.revelado .paso,
  html.js-revelar .dos.revelado .bloque,
  html.js-revelar .pantalla.revelado,
  html.js-revelar .instalar.revelado,
  html.js-revelar .pruebas.revelado,
  html.js-revelar .opina.revelado,
  html.js-revelar .instagram.revelado { opacity:1; transform:none }

  /* Cascada corta: las tarjetas de un mismo grupo no entran todas a la vez. */
  html.js-revelar .pasos.revelado .paso:nth-child(2) { transition-delay:120ms }
  html.js-revelar .pasos.revelado .paso:nth-child(3) { transition-delay:240ms }
  html.js-revelar .dos.revelado .bloque:nth-child(2) { transition-delay:150ms }

  /* Las tarjetas de "lista" dentro de cada bloque también entran en cascada propia. */
  html.js-revelar .dos .bloque .lista li { opacity:0; transform:translateX(-18px); transition:opacity .4s ease-out, transform .4s cubic-bezier(.34,1.56,.64,1) }
  html.js-revelar .dos.revelado .bloque .lista li { opacity:1; transform:none }
  html.js-revelar .dos.revelado .bloque .lista li:nth-child(1) { transition-delay:80ms }
  html.js-revelar .dos.revelado .bloque .lista li:nth-child(2) { transition-delay:140ms }
  html.js-revelar .dos.revelado .bloque .lista li:nth-child(3) { transition-delay:200ms }
  html.js-revelar .dos.revelado .bloque .lista li:nth-child(4) { transition-delay:260ms }
  html.js-revelar .dos.revelado .bloque .lista li:nth-child(5) { transition-delay:320ms }
  html.js-revelar .dos.revelado .bloque .lista li:nth-child(6) { transition-delay:380ms }
}

@media (max-width:720px) {
  .barra { border-radius:24px; flex-wrap:wrap; padding:8px 10px }
  .barra .bajar { margin-left:auto }
  .barra nav { order:3; width:100%; margin:0; justify-content:space-between }
  .barra nav a { font-size:15px; padding:6px 10px }
}

/* Pie: lo legal y el contacto. */
.pie { max-width:1240px; margin:48px auto 0; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; align-items:center; font-size:14px; color:var(--suave) }
.pie a { color:var(--choco); font-weight:600 }
.pie .firma { flex-basis:100%; text-align:center }