/* ============================================================================
   neko-doc.css — molde común de las páginas de documento de NekoStrip
   (licencia, condiciones de venta, privacidad, aviso legal, requisitos,
   soporte). La landing NO usa esta hoja: es una página de marketing con su
   propio CSS. Aquí manda la legibilidad.

   Vive en un archivo aparte y no dentro de cada HTML porque son seis páginas:
   incrustarlo significaría seis copias que hay que mantener a la vez, y que el
   visitante se descarga otra vez en cada página. Así se descarga una y se
   cachea para todas.

   Paleta idéntica a la de la landing, a propósito: son el mismo sitio.
   ========================================================================= */

/* Inter, alojada aquí mismo — nunca desde fonts.googleapis.com, que enviaría
   la IP de cada visitante a Google en EE. UU. sin base legal. Fuente variable:
   un archivo de 48 KB cubre los pesos 400-900.
   Inter © Rasmus Andersson — SIL Open Font License 1.1. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#f8f9fa; --panel:#ffffff; --line:rgba(27,46,56,.11);
  --text:#2a3b44; --dim:#5e6f76; --strong:#1b2e38;
  --accent:#d35bb5; --accent3:#c94fb0;
  --ok:#1f9d6b; --warn-bg:#fff4d6; --warn-bd:#e6b94a; --warn-ink:#7a5514;
  --fill-bg:#fff4d6; --fill-bd:#e6b94a; --fill-ink:#7a5514;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);
     line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent3)}
.wrap{max-width:780px;margin:0 auto;padding:0 22px}
.wrap.ancho{max-width:940px}          /* soporte y requisitos respiran más */

/* ── cabecera ──────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(248,249,250,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;
  height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;
  color:var(--strong);text-decoration:none}
.brand img{width:30px;height:30px;border-radius:50%;
  box-shadow:0 3px 10px rgba(211,91,181,.32)}
.topnav{display:flex;align-items:center;gap:16px}
.topnav a{font-size:13.5px;font-weight:600;color:var(--dim);text-decoration:none}
.topnav a:hover{color:var(--accent3)}
@media(max-width:640px){ .topnav a{display:none} }
.langsel{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.langsel button{border:0;background:transparent;padding:6px 12px;
  font:600 12px var(--font);color:var(--dim);cursor:pointer}
.langsel button.on{background:var(--accent);color:#fff}

/* Se ve solo mientras queden marcadores .fill sin rellenar — ver el script al
   final de cada página. No hay que quitarla a mano: en cuanto sustituyas el
   último por texto real, desaparece sola en la siguiente carga. */
#draftNotice{display:none;background:var(--warn-bg);border-bottom:1px solid var(--warn-bd);
  color:var(--warn-ink);font-size:13px;font-weight:600;text-align:center;padding:10px 16px}
#draftNotice.show{display:block}

/* ── texto ─────────────────────────────────────────────────────────────── */
main{padding:44px 0 70px}
h1{font-size:clamp(26px,4vw,34px);color:var(--strong);letter-spacing:-.02em;
   margin-bottom:6px;line-height:1.25}
.sub{color:var(--dim);font-size:14.5px;margin-bottom:34px}
h2{font-size:16px;color:var(--strong);margin:26px 0 8px;padding-left:12px;
   border-left:3px solid var(--accent)}
h3{font-size:14.5px;color:var(--strong);margin:20px 0 6px}
p{margin-bottom:12px;font-size:14.8px}
p b,li b{color:var(--strong)}
ul,ol{margin:0 0 14px 22px;font-size:14.8px}
li{margin-bottom:6px}
code{font:600 13px ui-monospace,'Cascadia Code',Consolas,monospace;
  background:rgba(27,46,56,.06);padding:2px 6px;border-radius:5px;color:var(--strong)}
.fill{background:var(--fill-bg);border:1px dashed var(--fill-bd);color:var(--fill-ink);
  border-radius:4px;padding:1px 5px;font-style:normal;font-weight:600;font-size:.94em}
.meta{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--dim);font-size:12.5px}

/* ── avisos ────────────────────────────────────────────────────────────── */
.callout{border:1px solid var(--line);background:var(--panel);border-radius:12px;
  padding:15px 18px;margin:18px 0;font-size:14px}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-ink)}
.callout.warn b{color:var(--warn-ink)}
.callout.ok{border-color:rgba(31,157,107,.4);background:rgba(31,157,107,.07)}

/* ── tablas ────────────────────────────────────────────────────────────── */
/* En móvil una tabla de requisitos no cabe: se deja rodar en horizontal DENTRO
   de su caja, para que no sea la página entera la que se desplace. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 22px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{background:rgba(27,46,56,.035);color:var(--strong);font-weight:700;
  font-size:12.5px;letter-spacing:.02em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--strong)}
.si{color:var(--ok);font-weight:700}
.no{color:#c0392b;font-weight:700}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
/* <details> nativo: sin JS, accesible por teclado, y el buscador del navegador
   (Ctrl+F) encuentra el texto de las respuestas cerradas en los navegadores
   modernos. Un acordeón hecho a mano no da nada de eso. */
.faq-cat{margin:34px 0 4px;font-size:13px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent3)}
details.qa{border:1px solid var(--line);background:var(--panel);border-radius:12px;
  margin-bottom:9px;overflow:hidden}
details.qa summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:14.5px;
  color:var(--strong);list-style:none;display:flex;gap:12px;align-items:flex-start}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";margin-left:auto;color:var(--accent3);
  font-weight:800;font-size:18px;line-height:1;flex-shrink:0}
details.qa[open] summary::after{content:"\2212"}
details.qa[open] summary{border-bottom:1px solid var(--line)}
details.qa .a{padding:14px 18px;font-size:14.3px}
details.qa .a p:last-child{margin-bottom:0}

/* ── formulario ────────────────────────────────────────────────────────── */
.form{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px;margin:22px 0 8px}
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:600;font-size:13.5px;color:var(--strong);
  margin-bottom:6px}
.campo .pista{font-weight:400;color:var(--dim);font-size:12.5px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font:400 14px var(--font);background:#fff;color:var(--strong)}
.campo textarea{resize:vertical;min-height:130px;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--accent)}
/* Casilla de aceptación ("he leído y acepto..."), reutilizable en cualquier
   página de documento que necesite pedir una antes de enviar algo. */
.chk{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:13.5px;
  line-height:1.5;margin:4px 0 18px}
.chk input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);
  flex-shrink:0;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:11px;padding:13px 22px;font:700 15px var(--font);
  background:var(--accent);color:#fff;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent3)}
.btn.sec{background:transparent;color:var(--accent3);border:1.5px solid var(--line)}
.btn.sec:hover{background:rgba(211,91,181,.07)}
.btn-fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.aviso-form{font-size:12.5px;color:var(--dim);margin-top:12px}

/* ── pie ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:30px 0;font-size:12.5px;
  color:var(--dim);text-align:center}
footer a{color:var(--dim);margin:0 8px}

/* Traducción: cada bloque marcado con data-es / data-en, y el <html lang>
   decide cuál se ve. Ver setLang() en cada página. */
html[lang="es"] [data-en]{display:none}
html[lang="en"] [data-es]{display:none}