/* ============================================================
   e-Qapla · recursos · sistema base
   Sistema declarado (hoja /taste, ver CLAUDE.md):
   2 familias (Inter + JetBrains Mono), 1 acento (#1E50FA),
   2 radios (24px superficie, 100px pill), 1 escala de spacing,
   1 nivel de sombra, 2 gestos de movimiento.
   ============================================================ */

:root{
  color-scheme: light;

  /* acento unico de marca */
  --blue:#1E50FA;
  --blue-ink:#1740D6;      /* azul de texto, contraste AA sobre claro */
  --blue-wash:#EDF1FF;
  --green:#05B169;
  --red:#CF202F;

  /* superficies */
  --canvas:#F7F7F7;
  --surface:#FFFFFF;
  --surface-2:#EEF0F3;
  --line:#DEE1E6;
  --line-strong:#C6CBD3;
  --text:#0A0B0D;
  --text-2:#55606E;
  --text-3:#7C8593;

  /* banda editorial cerca-negro: la firma visual de e-Qapla */
  --band:#0A0B0D;
  --band-text:#FFFFFF;
  --band-text-2:#A8B0BE;
  --band-line:#242A33;
  --band-accent:#7FA0FF;

  --shadow:0 4px 12px rgba(10,11,13,.07);

  --r:24px;
  --pill:100px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:96px;

  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --blue-ink:#89A6FF;
    --blue-wash:#141C33;
    --green:#3DD68C;
    --red:#FF7A80;
    --canvas:#0A0B0D;
    --surface:#131519;
    --surface-2:#1B1E24;
    --line:#272B32;
    --line-strong:#3D434C;
    --text:#F3F5F8;
    --text-2:#A6AEBB;
    --text-3:#79818E;
    --band:#131519;
    --band-line:#272B32;
    --shadow:0 4px 12px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --blue-ink:#89A6FF;
  --blue-wash:#141C33;
  --green:#3DD68C;
  --red:#FF7A80;
  --canvas:#0A0B0D;
  --surface:#131519;
  --surface-2:#1B1E24;
  --line:#272B32;
  --line-strong:#3D434C;
  --text:#F3F5F8;
  --text-2:#A6AEBB;
  --text-3:#79818E;
  --band:#131519;
  --band-line:#272B32;
  --shadow:0 4px 12px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-.03em; line-height:1.06}
h1{font-size:clamp(34px,6vw,58px)}
h2{font-size:clamp(24px,3.4vw,30px); letter-spacing:-.025em}
h3{font-size:21px; letter-spacing:-.02em}
h4{font-size:17px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
p{margin:0}

.lead{font-size:19px; color:var(--text-2); line-height:1.5; max-width:62ch}
.small{font-size:15px; color:var(--text-2); line-height:1.55}
.micro{font-size:13px; color:var(--text-3); line-height:1.5}

.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500}

.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-ink);
}

a{color:var(--blue-ink); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}

/* ---------- foco visible, diseñado ---------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--blue-ink);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- layout ---------- */
.wrap{max-width:1000px; margin:0 auto; padding:0 var(--s5)}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 var(--s5)}
.stack-s > * + *{margin-top:var(--s3)}
.stack   > * + *{margin-top:var(--s5)}
.stack-l > * + *{margin-top:var(--s7)}

section{padding:var(--s8) 0}

/* ---------- barra superior ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px solid var(--line);
}
.topbar .back{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);
}
.topbar .back:hover{color:var(--text); text-decoration:none}

.themetoggle{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--text-2);
  border-radius:var(--pill); padding:6px 14px; cursor:pointer;
  min-height:32px;
}
.themetoggle:hover{border-color:var(--line-strong); color:var(--text)}

/* ---------- banda editorial ---------- */
.band{background:var(--band); color:var(--band-text); padding:var(--s8) 0 var(--s8)}
.band h1,.band h2{color:var(--band-text)}
.band .lead{color:var(--band-text-2)}
.band .eyebrow{color:var(--band-accent)}
.band a{color:var(--band-accent)}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5)}
.chip{
  font-family:var(--mono); font-size:12px; font-weight:500;
  border:1px solid var(--band-line); color:var(--band-text-2);
  border-radius:var(--pill); padding:5px 13px;
}

/* ---------- wordmark ---------- */
.wm{
  display:block;
  -webkit-mask-image:url("eqapla-wordmark.svg");
  mask-image:url("eqapla-wordmark.svg");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  background-color:currentColor;
  width:180px; height:43px;
}
.wm-l{width:236px; height:56px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-.01em;
  background:var(--blue); color:#fff; border:1px solid var(--blue);
  border-radius:var(--pill); padding:13px 26px; min-height:48px;
  cursor:pointer; transition:box-shadow .18s ease, transform .18s ease;
}
.btn:hover{box-shadow:var(--shadow); transform:translateY(-1px); text-decoration:none}
.btn:active{transform:none}

.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--line-strong);
}
.btn-ghost:hover{border-color:var(--text); box-shadow:none; transform:none}

.btn-sm{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:7px 14px; min-height:34px; border-radius:var(--pill);
  background:transparent; color:var(--text-2); border:1px solid var(--line);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s ease, color .15s ease;
}
.btn-sm:hover{border-color:var(--blue); color:var(--blue-ink); text-decoration:none}
.btn-sm[data-copied="1"]{border-color:var(--green); color:var(--green)}

/* ---------- superficies ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s6);
}
.panel-flat{background:transparent; border:0; padding:0}

/* nota de metodo: la unica caja con borde izquierdo, para no repetir el gesto */
.method{
  border-left:2px solid var(--blue);
  padding:var(--s1) 0 var(--s1) var(--s4);
  font-size:15px; color:var(--text-2); line-height:1.55; max-width:64ch;
}
.method b{color:var(--text); font-weight:600}

.hair{height:1px; background:var(--line); border:0; margin:0}

/* ---------- formularios ---------- */
.field{display:block}
.field > label{
  display:block; font-size:15px; font-weight:600; color:var(--text);
  margin-bottom:var(--s2); letter-spacing:-.01em;
}
.field .hint{display:block; font-size:13px; color:var(--text-3); font-weight:400; margin-top:2px}

input[type="text"], input[type="number"], input[type="url"], input[type="email"], textarea, select{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--text);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:12px 18px; min-height:48px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type="number"]{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500}
textarea{min-height:96px; resize:vertical; line-height:1.5; padding-top:14px}
select{appearance:none; cursor:pointer; padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
input:hover, textarea:hover, select:hover{border-color:var(--text-3)}
input:focus, textarea:focus, select:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash); outline:none;
}
input::placeholder, textarea::placeholder{color:var(--text-3)}
input[aria-invalid="true"]{border-color:var(--red)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
@media (max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}

.err{color:var(--red); font-size:14px; margin-top:var(--s2)}

/* ---------- bloque de codigo ---------- */
.code{
  background:var(--band); color:#E4E8F0; border-radius:var(--r);
  padding:var(--s5); font-family:var(--mono); font-size:13.5px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word; overflow-x:auto; margin:0;
  border:1px solid var(--band-line);
}
.code .c-h{color:var(--band-accent); font-weight:600}
.code .c-q{color:#9AA3B2}

/* ---------- estado vacio ---------- */
.empty{
  border:1px dashed var(--line-strong); border-radius:var(--r);
  padding:var(--s7) var(--s5); text-align:left; color:var(--text-2);
  font-size:15px; line-height:1.6;
}
.empty b{color:var(--text); font-weight:600; display:block; margin-bottom:var(--s2); font-size:17px}

/* ---------- indice numerado, el gesto de la casa ---------- */
.idx{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text-3);
  letter-spacing:.04em; position:relative; display:inline-block; padding-bottom:5px;
}
.idx::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.row:hover .idx::after, .row:focus-within .idx::after, .idx.on::after{transform:scaleX(1)}

/* ---------- pie de marca ---------- */
.brandblock{border-top:1px solid var(--line); padding:var(--s8) 0 var(--s9)}
.brandblock .wm{color:var(--text); margin-bottom:var(--s5)}
.brandblock p{max-width:60ch}
.brandlinks{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); font-size:15px}
.brandlinks .m{font-family:var(--mono); font-size:13px; color:var(--text-3)}

/* ---------- movimiento ---------- */
.tick{animation:tick .34s ease-out}
@keyframes tick{from{opacity:.35; transform:translateY(-2px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- utilitarios ---------- */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.right{text-align:right}
.mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)}