/* Tools · Rebeldes del Marketing. Tokens de C:\Claude Code\Rebeldes\marca\marca.md */
:root{
  --bg:#0D0D0F; --surface:#17171A; --ink:#0D0D0F;
  --text:#F0ECE1; --text-2:#DDD6C4; --text-3:#CFC7B2;
  --line:rgba(240,236,225,.18);
  --orange:#E66F4A; --orange-light:#F28A66;
  --holo:linear-gradient(115deg,#bfeaff,#e0c3ff,#ffc6e2,#fff2bf,#c6ffd9);
  --holo-shift:0%;
  --fd:'Space Grotesk',system-ui,sans-serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono',monospace;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--fb);min-height:100vh;
  background-image:radial-gradient(38% 42% at 18% 12%,rgba(230,111,74,.14),transparent 68%),radial-gradient(42% 46% at 86% 88%,rgba(150,200,230,.10),transparent 70%);background-attachment:fixed}
.grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(240,236,225,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(240,236,225,.04) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 80%)}
a{color:inherit}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.mono{font-family:var(--fm);text-transform:uppercase;letter-spacing:.12em}

/* Cabecera */
.top{position:sticky;top:0;z-index:5;background:rgba(13,13,15,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{height:34px;width:auto;display:block}
.marca .tag{font:700 12px var(--fm);letter-spacing:.16em;color:var(--ink);background:var(--orange);padding:3px 8px;border-radius:6px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--text-2);padding:10px 12px;border-radius:8px;min-height:40px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--orange-light);background:var(--surface);box-shadow:inset 0 -2px 0 var(--orange)}
.nav a[hidden]{display:none}
.salir{font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-decoration:none;padding:10px 8px}
.salir:hover{color:var(--text)}

/* Cabecera de página */
.hero{padding:48px 0 8px}
.eyebrow{font:500 12px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:8px;margin:0 0 12px}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--orange);display:inline-block}
h1{font:700 clamp(32px,5vw,54px)/1.04 var(--fd);letter-spacing:-.02em;margin:0 0 12px;overflow-wrap:break-word}
.hero p{color:var(--text-2);max-width:640px;margin:0}

/* Secciones */
.seccion{padding:40px 0 8px}
.seccion-cab{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.num{font:700 12px var(--fm);color:var(--ink);background:var(--orange);border-radius:6px;padding:3px 7px}
.seccion-cab h2{font:700 24px/1.2 var(--fd);letter-spacing:-.01em;margin:0}
.seccion-cab .mono{font-size:11px;color:var(--text-3);margin-left:auto}
.nota{color:var(--text-2);font-size:15px;margin:-6px 0 18px;max-width:720px}

/* Tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:14px;
  border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(var(--line),var(--line)) border-box;
  min-width:0;transition:transform .2s ease,box-shadow .2s ease}
.tarjeta:hover,.tarjeta:focus-within{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.45);
  background:linear-gradient(#201d22,#191919) padding-box,var(--holo) border-box;background-size:auto,300% 100%;background-position:0 0,var(--holo-shift) 50%}
.tarjeta-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.icono{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.icono svg{width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tipo{font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.estado{margin-left:auto;font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--text-3)}
.estado.uso{color:var(--orange-light)}
.estado.uso::before{background:var(--orange);border-color:var(--orange)}
.estado.obra::before{background:linear-gradient(90deg,var(--text-3) 50%,transparent 50%)}
.tarjeta h3{font:700 22px/1.15 var(--fd);letter-spacing:-.01em;margin:0}
.tarjeta p{margin:0;color:var(--text-2);font-size:15px}
.tarjeta .donde{font:400 13px/1.5 var(--fm);color:var(--text-3);text-transform:none;letter-spacing:0;word-break:break-word}
details.uso{border-top:1px solid var(--line);padding-top:10px}
details.uso summary{cursor:pointer;font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);min-height:28px;display:flex;align-items:center;list-style:none}
details.uso summary::-webkit-details-marker{display:none}
details.uso summary::after{content:"+";margin-left:auto;color:var(--orange-light);font-size:16px}
details.uso[open] summary::after{content:"–"}
details.uso ol{margin:8px 0 0;padding-left:20px;color:var(--text-2);font-size:14px}
details.uso li{margin:4px 0}
.acciones{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.btn{font:700 12px var(--fm);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid transparent;transition:transform .15s ease}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-o{background:var(--orange);color:var(--ink)}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(230,111,74,.22)}
.btn-out{background:transparent;color:var(--text);border-color:var(--line)}
.btn-out:hover{transform:translateY(-2px);border-color:var(--orange)}
.btn-off{background:transparent;color:var(--text-3);border:1px dashed var(--line);cursor:default}
.solo-interno{font:500 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-light);border:1px solid var(--orange);border-radius:6px;padding:2px 6px}
[hidden]{display:none!important}

a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--orange-light);outline-offset:2px}

.pie{padding:48px 0 40px;color:var(--text-3);font-size:13px}

/* Entrar */
.entrar{min-height:100vh;display:grid;place-items:center;padding:22px;position:relative;z-index:1}
.caja{width:100%;max-width:400px;padding:30px;border-radius:14px;border:1.5px solid transparent;
  background:linear-gradient(#201d22,#191919) padding-box,var(--holo) border-box}
.caja img{height:28px;display:block;margin-bottom:22px}
.caja h1{font-size:34px}
.caja p{color:var(--text-2);margin:0 0 20px;font-size:15px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font:500 12px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.campo input{font:400 16px var(--fb);color:var(--text);border:1.5px solid transparent;border-radius:10px;padding:12px 14px;min-height:46px;outline:none;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(var(--line),var(--line)) border-box;transition:background .2s ease}
.campo input:focus{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--holo) border-box}
.error{color:var(--orange-light);font-size:14px;margin:0 0 14px;border-left:2px solid var(--orange);padding-left:10px}
.caja .btn{width:100%;justify-content:center;border:0;cursor:pointer}

@media (max-width:820px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  .tarjetas{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .top .wrap{gap:8px;padding-top:8px;padding-bottom:4px}
  .nav{margin-left:0;width:100%;order:3}
  .salir{margin-left:auto}
  .seccion-cab .mono{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tarjeta,.btn{transition:none}
  .tarjeta:hover,.tarjeta:focus-within,.btn:hover{transform:none}
}