/* ===== Variables de color y tipografía ===== */
:root{
  --bg:#EEF0F6;--panel:#FFFFFF;--ink:#12172B;--muted:#59617F;--line:#D3D8E6;
  --accent:#2B3BFF;--accent-ink:#FFFFFF;--warn:#9A5B00;--err:#B3261E;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Modo oscuro automático según el sistema */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1120;--panel:#171B30;--ink:#ECEEF8;--muted:#9AA2C2;--line:#2A3050;
    --accent:#8392FF;--accent-ink:#0E1120;--warn:#F0B35A;--err:#FF8A80;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1120;--panel:#171B30;--ink:#ECEEF8;--muted:#9AA2C2;--line:#2A3050;
  --accent:#8392FF;--accent-ink:#0E1120;--warn:#F0B35A;--err:#FF8A80;color-scheme:dark;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body)}
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 48px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ===== Cabecera ===== */
.brand{font:700 1.15rem var(--display);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.mark{width:22px;height:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mark i{background:var(--ink);border-radius:1px}
.mark i:nth-child(2),.mark i:nth-child(4),.mark i:nth-child(9){background:var(--accent)}
.mark i:nth-child(6),.mark i:nth-child(7){background:transparent}
h1{font:700 clamp(2rem,5.5vw,3.4rem)/1.02 var(--display);letter-spacing:-.03em;margin:34px 0 8px;max-width:16ch}
.lead{color:var(--muted);margin:0 0 28px;max-width:52ch}

/* ===== Disposición: formulario + vista previa ===== */
.app{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .app{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .preview{position:sticky;top:20px}
}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}

/* ===== Pestañas ===== */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.tabs button{font:500 .95rem var(--body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}

/* ===== Formulario ===== */
label{display:block;font-weight:500;font-size:.92rem;margin:0 0 6px}
input[type=text],input[type=url],input[type=tel],textarea,select{
  width:100%;font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;
}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;align-items:center;gap:8px;font-weight:400}
.check input{width:auto}
.check-top{margin-top:30px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
h2{font:700 1.05rem var(--display);margin:0 0 14px}
.range{display:flex;align-items:center;gap:12px}
.range input{flex:1;accent-color:var(--accent)}
.range output{min-width:5.5ch;text-align:right;font-variant-numeric:tabular-nums}
input[type=color]{width:100%;height:42px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer}

/* ===== Vista previa ===== */
.stage{
  display:grid;place-items:center;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);overflow:hidden;
  background-color:var(--bg);
  background-image:conic-gradient(var(--line) 25%,transparent 0 50%,var(--line) 0 75%,transparent 0);
  background-size:16px 16px; /* cuadrícula que muestra la transparencia */
}
.stage canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.stage p{margin:0;padding:20px;text-align:center;color:var(--muted);background:var(--panel);border-radius:8px;max-width:26ch}
.info{margin:12px 0 0;font-size:.9rem;color:var(--muted);min-height:1.4em}
.info.warn{color:var(--warn)}
.info.err{color:var(--err)}
.btn{width:100%;margin-top:14px;font:700 1rem var(--body);color:var(--accent-ink);background:var(--accent);border:0;border-radius:10px;padding:14px 18px;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ===== Anuncio (desaparece mientras no tenga contenido) ===== */
.ad-slot{margin:28px 0 0;min-height:90px;text-align:center}
.ad-slot:empty{display:none}

/* ===== Pie ===== */
.soon{margin-top:36px;color:var(--muted);font-size:.95rem;max-width:64ch}
.soon strong{color:var(--ink)}

/* ===== Menú, pie y páginas de texto ===== */
.site-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.site-head .brand{color:var(--ink);text-decoration:none}
.site-head nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-head nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem}
.site-head nav a:hover{color:var(--ink);text-decoration:underline}
.site-foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
.site-foot p{margin:0 0 8px}
.site-foot a{color:var(--muted);margin-right:16px}
.prose{max-width:68ch}
.prose h1{max-width:none}
.prose h2{font:700 1.3rem var(--display);letter-spacing:-.01em;margin:36px 0 8px}
.prose p{margin:0 0 14px}
.prose a{color:var(--accent)}
.prose details{border-top:1px solid var(--line);padding:12px 0}
.prose details:last-of-type{border-bottom:1px solid var(--line)}
.prose summary{cursor:pointer;font-weight:500}
.prose details p{margin:10px 0 0;color:var(--muted)}
.btn-link{display:inline-block;margin-top:20px;font-weight:700;color:var(--accent-ink)!important;background:var(--accent);border-radius:10px;padding:12px 20px;text-decoration:none}
.brand img{height:32px;width:auto;display:block}