/* ==========================================================================
   mipitch.app · glosario.css — Glosario del emprendedor
   ==========================================================================
   Página pública. Colores y tipografías de design-tokens.css. Una columna de
   lectura, un buscador de una línea y las entradas como fichas con ancla, para
   poder enlazar un término desde el taller o desde una charla.
   ========================================================================== */
*{box-sizing:border-box; margin:0; padding:0;}
button, a, input{touch-action:manipulation;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{background-color:var(--paper); background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:32px 32px; color:var(--ink); font-family:var(--mp-font-body); font-size:16px; line-height:1.65;}
svg.ico{width:1.1em; height:1.1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; display:inline-block; vertical-align:-.18em;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}

.wrap{max-width:860px; margin:0 auto; padding:0 20px 60px;}

/* Barra superior (misma que el landing) */
.barra{position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; box-shadow:0 2px 10px rgba(51,45,36,.25);}
.barra .wrap{display:flex; align-items:center; gap:18px; min-height:56px; padding-bottom:0;}
.marca{display:inline-flex; align-items:center; gap:9px; font-family:var(--mp-font-display); font-size:1.05rem; letter-spacing:.02em; color:#fff; text-decoration:none;}
.marca svg.ico{width:22px; height:22px; color:var(--yellow);}
.barra nav{margin-left:auto; display:flex; align-items:center; gap:4px 22px; flex-wrap:wrap; justify-content:flex-end;}
.barra nav a{color:rgba(255,255,255,.88); text-decoration:none; font-size:.86rem; font-weight:600; padding:6px 0;}
.barra nav a:hover{color:#fff;}
.barra nav a.entrar{background:var(--yellow); color:var(--navy); border-radius:999px; padding:8px 16px;}
.barra nav a.entrar:hover{background:var(--mp-yellow-hover);}
.barra nav a.panel{border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 15px;}
.barra nav a.panel:hover{border-color:#fff;}
@media (max-width:640px){ .barra nav a:not(.entrar):not(.panel){display:none;} }

header{padding:52px 0 18px;}
.kicker{font-family:var(--mp-font-accent); font-size:1.6rem; color:var(--blue); margin:0 0 6px; line-height:1;}
h1{font-family:var(--mp-font-display); font-weight:600; color:var(--navy); font-size:clamp(26px,5.5vw,40px); line-height:1.12; letter-spacing:-.5px; margin:0 0 14px;}
h1 .hl{position:relative; white-space:nowrap;}
h1 .hl::after{content:""; position:absolute; left:-2px; right:-2px; bottom:4px; height:.38em; background:var(--yellow); z-index:-1; transform:rotate(-1deg);}
.lead{font-size:1.05rem; max-width:640px; margin:0 0 8px; color:var(--ink);}

/* Buscador */
.buscar{position:relative; margin:22px 0 6px;}
.buscar svg.ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--gray); width:20px; height:20px;}
.buscar input{width:100%; border:2px solid var(--line); border-radius:999px; padding:14px 18px 14px 48px; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--mp-cream);}
.buscar input:focus{outline:none; border-color:var(--navy); box-shadow:var(--mp-focus-ring);}
.buscar input::placeholder{color:var(--mp-placeholder);}
.conteo{font-size:.82rem; color:var(--mp-gray-text); margin:8px 0 0; min-height:1.3em;}

/* Índice alfabético */
.letras{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 8px;}
.letras a{display:inline-grid; place-items:center; min-width:34px; height:34px; border-radius:9px; background:var(--card); border:1px solid var(--line); color:var(--navy); font-weight:700; font-size:.86rem; text-decoration:none; padding:0 8px;}
.letras a:hover{border-color:var(--navy);}

/* Entradas */
.grupo{margin-top:26px;}
.grupo h2{font-family:var(--mp-font-display); font-weight:600; color:var(--blue); font-size:1.15rem; letter-spacing:.02em; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line);}
.grupo.oculto{display:none;}
.termino{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:10px 0; box-shadow:0 4px 20px -4px rgba(51,45,36,.08); scroll-margin-top:80px;}
.termino.oculto{display:none;}
.termino:target{border-color:var(--yellow); box-shadow:0 0 0 3px rgba(231,180,85,.35);}
.termino h3{font-family:var(--mp-font-display); font-weight:600; color:var(--navy); font-size:1.15rem; line-height:1.2; margin:0 0 6px;}
.termino h3 small{font-family:var(--mp-font-body); font-weight:500; font-size:.8rem; color:var(--mp-gray-text); margin-left:8px;}
.termino p{font-size:.95rem;}
.termino .cuando{margin-top:8px; font-size:.86rem; color:var(--mp-gray-text); border-left:3px solid var(--yellow); padding-left:10px;}
.termino .cuando b{color:var(--navy); font-weight:600;}
.termino mark{background:var(--yellow); color:inherit; padding:0 2px; border-radius:3px;}

.nada{display:none; background:var(--mp-amber-bg); border-left:5px solid var(--yellow); border-radius:12px; padding:16px 18px; margin-top:18px; font-size:.92rem;}
.nada.on{display:block;}
.nada a{color:var(--blue); font-weight:600;}

/* Cierre */
.cierre{margin-top:40px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; text-align:center;}
.cierre p{color:var(--mp-gray-text); margin:6px 0 16px; font-size:.95rem;}
.cierre h2{font-family:var(--mp-font-display); font-weight:600; color:var(--navy); font-size:1.4rem; margin:0;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.95rem; padding:13px 24px; border-radius:999px; text-decoration:none; background:var(--navy); color:#fff;}
.btn:hover{box-shadow:0 4px 14px rgba(51,45,36,.35);}

footer{margin-top:40px; padding-top:24px; border-top:1px solid var(--line); text-align:center; color:var(--mp-gray-text); font-size:.85rem;}
footer p{margin:6px 0;}
footer a{color:var(--blue); font-weight:600; text-decoration:none;}
footer a:hover{text-decoration:underline;}