/* Loopi 3D Studio — estilos compartidos por la portada y el estudio.
   Dos estilos: "loopi" (rosa de la marca, redondeado) y "taller" (grafito y azul, sobrio). */
:root,[data-tema="loopi"]{
  /* magenta del logo (#F3118E) sobre el rosa claro de la marca */
  --bg:#fff4f9; --bg2:#fcd3e7; --panel:#ffffff; --ink:#3b1a2c; --muted:#8a6578; --line:#f8d6e7;
  --accent:#ec118a; --accent-hover:#d00c78; --accent-ink:#ffffff; --accent-soft:#fde2ef;
  --n-bg:#ec118a; --n-ink:#ffffff; --zona-bg:#fff7fb; --zona-line:#f6a9cd; --fila-hover:#fff5fa;
  --ok:#1f7a4a; --ok-bg:#e3f2e9; --bad:#b3261e; --bad-bg:#fbe4e1; --warn:#8a5a00; --warn-bg:#fff2d6;
  --chip:#ffe8f2; --radius:20px; --radius-ctrl:12px; --header-bg:rgba(255,255,255,.92); --header-ink:var(--ink);
  --fuente:"Nunito","Quicksand","Segoe UI",system-ui,-apple-system,sans-serif; --fuente-titulo:"Nunito","Segoe UI",system-ui,sans-serif;
  --peso-titulo:900; --sombra:0 10px 30px rgba(236,17,138,.12); --boton-radio:999px;
}
[data-tema="taller"]{
  --bg:#eef1f4; --bg2:#e2e7ec; --panel:#ffffff; --ink:#151a20; --muted:#5d6773; --line:#d9dee4;
  --accent:#2563eb; --accent-hover:#1d4fd0; --accent-ink:#ffffff; --accent-soft:#e3ecfd;
  --n-bg:#151a20; --n-ink:#ffffff; --zona-bg:#f7f9fb; --zona-line:#b9c2cc; --fila-hover:#f6f8fa;
  --chip:#e9edf1; --radius:8px; --radius-ctrl:6px; --header-bg:#151a20; --header-ink:#ffffff;
  --fuente:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --fuente-titulo:"Inter","Segoe UI",system-ui,sans-serif;
  --peso-titulo:800; --sombra:0 8px 24px rgba(21,26,32,.10); --boton-radio:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--fuente);transition:background .2s}
a{color:inherit}
.oculto{display:none!important}

/* encabezado */
header.barra{display:flex;align-items:center;gap:16px;padding:10px 28px;background:var(--header-bg);color:var(--header-ink);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
[data-tema="taller"] header.barra{border-bottom-color:#151a20}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
#logo{height:46px;width:auto;display:block}
[data-tema="taller"] #logo{filter:brightness(0) invert(1)}
.marca-texto{font:900 26px/1 var(--fuente-titulo);letter-spacing:.04em;color:var(--accent)}
[data-tema="taller"] .marca-texto{color:#fff}
.marca small{display:block;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
[data-tema="taller"] .marca small{color:#9aa5b1}
.barra nav{display:flex;gap:18px;margin-left:24px;font-size:14px;font-weight:600}
.barra nav a{text-decoration:none;opacity:.8}.barra nav a:hover{opacity:1;color:var(--accent)}
.derecha{margin-left:auto;display:flex;align-items:center;gap:12px}
.estilo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
[data-tema="taller"] .estilo{color:#9aa5b1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.seg button{border:0;border-radius:0;padding:6px 14px;font:inherit;font-size:13px;background:transparent;color:var(--ink);cursor:pointer}
.seg button.activa{background:var(--accent);color:var(--accent-ink)}

/* botones y controles */
button,.boton{font:inherit;cursor:pointer;border-radius:var(--radius-ctrl);border:1px solid var(--line);background:var(--panel);
  padding:9px 15px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
button:disabled{opacity:.5;cursor:not-allowed}
.primario{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:800;padding:11px 22px;border-radius:var(--boton-radio)}
.primario:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.grande{font-size:18px;padding:15px 34px}
select,input[type=number],input[type=text]{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:var(--radius-ctrl);background:#fff;color:var(--ink)}
input[type=color]{width:42px;height:32px;border:1px solid var(--line);border-radius:7px;padding:2px;background:#fff;cursor:pointer}
input[type=range]{accent-color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600}
.plan-chip{background:var(--accent-soft);color:var(--ink);text-decoration:none}
[data-tema="taller"] .plan-chip{background:#2a323c;color:#fff}
.msg{padding:10px 12px;border-radius:10px;font-size:14px}
.msg.error{background:var(--bad-bg);color:var(--bad)}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.aviso{background:var(--warn-bg);color:var(--warn)}
.candado{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:3px 10px;text-decoration:none}
@media (max-width:760px){header.barra{padding:10px 14px;flex-wrap:wrap}.barra nav{display:none}.estilo span{display:none}}