@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Hanken+Grotesk:wght@400;500;600;700&family=Schibsted+Grotesk:wght@500;600;700;800&display=swap'); /* ===================================================================== nacholledo.css · sistema base Uso: (o "vibrante" / "dark") Clases con prefijo nl- para no chocar con estilos existentes. ===================================================================== */ :root{ /* acentos de marca (usados sobre todo por el tema vibrante) */ --nl-c-amber:#FB8B0E; --nl-c-coral:#FF5A3C; --nl-c-magenta:#FF2D87; --nl-c-violet:#7B5BFF; --nl-c-blue:#1F73FF; --nl-c-cyan:#23C9D9; --nl-c-lime:#C9F24D; } /* ---------- TEMA DISCRETA ---------- */ [data-tema="discreta"]{ --nl-display:"Schibsted Grotesk",sans-serif; --nl-body:"Hanken Grotesk",sans-serif; --nl-bg:#FCFAF4; --nl-surface:#F1E7D5; --nl-surface-2:#E9DDC8; --nl-ink:#241E17; --nl-muted:#7A6F62; --nl-line:#E2D6C1; --nl-accent:#C9710C; --nl-accent-strong:#A85D08; --nl-on-accent:#FFFFFF; --nl-logo:#575756; --nl-radius:16px; } [data-tema="discreta"][data-theme="dark"]{ --nl-bg:#141009; --nl-surface:#2C2417; --nl-surface-2:#392F1E; --nl-ink:#F2EBDF; --nl-muted:#AEA08C; --nl-line:#403524; --nl-accent:#E0902A; --nl-accent-strong:#C9710C; --nl-on-accent:#1A1206; --nl-logo:#FFFFFF; } /* ---------- TEMA VIBRANTE ---------- */ [data-tema="vibrante"]{ --nl-display:"Bricolage Grotesque",sans-serif; --nl-body:"DM Sans",sans-serif; --nl-bg:#FAF6EF; --nl-surface:#FFFFFF; --nl-surface-2:#F2ECE1; --nl-ink:#1A1620; --nl-muted:#6A6472; --nl-line:#ECE6DC; --nl-accent:#FB8B0E; --nl-accent-strong:#D9740A; --nl-on-accent:#FFFFFF; --nl-logo:#575756; --nl-radius:22px; } [data-tema="vibrante"][data-theme="dark"]{ --nl-bg:#0F0D14; --nl-surface:#181520; --nl-surface-2:#221E2C; --nl-ink:#F4F1EA; --nl-muted:#A39CAE; --nl-line:#272231; --nl-logo:#FFFFFF; } /* ---------- BASE / UTILIDADES ---------- */ .nl-page{background:var(--nl-bg);color:var(--nl-ink);font-family:var(--nl-body);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s;min-height:100vh} .nl-wrap{max-width:1100px;margin:0 auto;padding:0 28px} .nl-logo{color:var(--nl-logo);transition:color .35s} .nl-display{font-family:var(--nl-display);font-weight:800;letter-spacing:-.025em;color:var(--nl-ink);line-height:1.04} .nl-h2{font-family:var(--nl-display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em} .nl-muted{color:var(--nl-muted)} /* ---------- BOTONES ---------- */ .nl-btn{font-family:var(--nl-body);font-weight:600;font-size:.92rem;border-radius:10px;padding:11px 20px;cursor:pointer;border:1px solid transparent;transition:transform .12s,filter .2s;display:inline-block;text-decoration:none;color:var(--nl-ink)} .nl-btn:hover{transform:translateY(-1px)} .nl-btn--primary{background:var(--nl-accent);color:var(--nl-on-accent)} .nl-btn--primary:hover{filter:brightness(1.05)} .nl-btn--ghost{background:transparent;color:var(--nl-ink);border-color:var(--nl-line)} .nl-btn--ghost:hover{background:var(--nl-surface-2)} .nl-btn--dark{background:var(--nl-ink);color:var(--nl-bg)} [data-tema="vibrante"] .nl-btn{border-radius:100px} [data-tema="vibrante"] .nl-btn--primary{background:linear-gradient(135deg,var(--nl-c-amber),var(--nl-c-magenta))} /* ---------- ETIQUETAS ---------- */ .nl-tag{font-family:var(--nl-body);font-size:.74rem;padding:5px 11px;border-radius:8px;background:var(--nl-surface-2);border:1px solid var(--nl-line);color:var(--nl-muted);font-weight:500;display:inline-block} .nl-tag--accent{background:color-mix(in srgb,var(--nl-accent) 16%,transparent);border-color:color-mix(in srgb,var(--nl-accent) 30%,transparent);color:var(--nl-accent-strong)} [data-tema="vibrante"] .nl-tag{border-radius:100px} /* ---------- TARJETAS ---------- */ .nl-card{border:1px solid var(--nl-line);border-radius:var(--nl-radius);background:var(--nl-surface);padding:24px;transition:transform .15s,border-color .2s} .nl-card--link{cursor:pointer} .nl-card--link:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--nl-accent) 45%,var(--nl-line))} .nl-card h3{font-family:var(--nl-display);font-weight:700;font-size:1.1rem;margin:0 0 7px} .nl-card p{font-size:.9rem;color:var(--nl-muted);margin:0} /* ---------- PESTAÑAS ---------- */ .nl-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px} .nl-tab{font-family:var(--nl-body);font-weight:600;font-size:.95rem;color:var(--nl-muted);background:none;border:none;cursor:pointer;padding:11px 16px;transition:.2s} .nl-tab:hover{color:var(--nl-ink)} .nl-tabpanel{display:none;animation:nl-fade .3s} .nl-tabpanel.is-on{display:block} @keyframes nl-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* discreta: subrayado ámbar */ [data-tema="discreta"] .nl-tabs{border-bottom:1px solid var(--nl-line)} [data-tema="discreta"] .nl-tab{border-bottom:2px solid transparent;margin-bottom:-1px} [data-tema="discreta"] .nl-tab.is-on{color:var(--nl-accent-strong);border-color:var(--nl-accent)} /* vibrante: píldora con degradado */ [data-tema="vibrante"] .nl-tabs{gap:10px} [data-tema="vibrante"] .nl-tab{border:1px solid var(--nl-line);border-radius:100px;background:var(--nl-surface);padding:10px 20px} [data-tema="vibrante"] .nl-tab.is-on{background:linear-gradient(135deg,var(--nl-c-amber),var(--nl-c-magenta));color:#fff;border-color:transparent} /* panel del tema vibrante con marco */ [data-tema="vibrante"] .nl-tabpanel.is-on{border:1px solid var(--nl-line);border-radius:var(--nl-radius);background:var(--nl-surface);padding:26px} [data-tema="vibrante"] .nl-tabpanel h3{font-family:var(--nl-display);font-weight:700;font-size:1.3rem;margin:0 0 8px} /* ---------- DESPLEGABLES (acordeón) ---------- */ .nl-acc{display:grid} .nl-acc-head{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:18px 20px;font-family:var(--nl-display);font-weight:700;font-size:1.02rem;color:var(--nl-ink);display:flex;justify-content:space-between;align-items:center;gap:14px} .nl-acc-ind{flex:none;transition:transform .3s;color:var(--nl-accent-strong);font-size:1rem;line-height:1} .nl-acc-item.is-open .nl-acc-ind{transform:rotate(180deg)} .nl-acc-body{max-height:0;overflow:hidden;transition:max-height .35s ease} .nl-acc-item.is-open .nl-acc-body{max-height:1500px} .nl-acc-body p{padding:0 20px 18px;color:var(--nl-muted);font-size:.94rem;margin:0} /* bloques que no son

(código, listas): el padding lo llevan ellos */ .nl-acc-body > *:not(p){margin-left:20px;margin-right:20px} /* discreta: bloque con divisiones */ [data-tema="discreta"] .nl-acc{border:1px solid var(--nl-line);border-radius:14px;overflow:hidden;background:var(--nl-surface)} [data-tema="discreta"] .nl-acc-item+.nl-acc-item{border-top:1px solid var(--nl-line)} /* vibrante: tarjetas separadas que se tiñen al abrir */ [data-tema="vibrante"] .nl-acc{gap:12px} [data-tema="vibrante"] .nl-acc-item{border:1px solid var(--nl-line);border-radius:18px;overflow:hidden;background:var(--nl-surface);transition:border-color .25s,background .25s} [data-tema="vibrante"] .nl-acc-ind{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--nl-c-amber),var(--nl-c-magenta));color:#fff;display:grid;place-items:center} [data-tema="vibrante"] .nl-acc-item.is-open{border-color:transparent;background:linear-gradient(135deg,color-mix(in srgb,var(--nl-c-violet) 16%,var(--nl-surface)),color-mix(in srgb,var(--nl-c-magenta) 13%,var(--nl-surface)))} @media(prefers-reduced-motion:reduce){.nl-tabpanel{animation:none}} /* ---------- NOTA (caja de aviso) ---------- */ .nl-nota{ border-left:3px solid var(--nl-accent); background:color-mix(in srgb,var(--nl-accent) 7%,transparent); border-radius:0 8px 8px 0; padding:12px 16px;margin:16px 0; color:var(--nl-ink);font-size:.94rem; } .nl-nota b{color:var(--nl-accent-strong)} /* ---------- CÓDIGO (bloque con botón copiar) ---------- */ .nl-code{position:relative;margin:16px 0} .nl-code pre{ background:var(--nl-surface-2); border:1px solid var(--nl-line); border-radius:12px; padding:16px;margin:0;overflow:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px;line-height:1.5;color:var(--nl-ink); } .nl-code-copy{ position:absolute;top:8px;right:8px; font-family:ui-monospace,monospace;font-size:11px; background:var(--nl-surface);border:1px solid var(--nl-line); color:var(--nl-muted);border-radius:8px; padding:5px 10px;cursor:pointer;transition:.15s; } .nl-code-copy:hover{color:var(--nl-ink);border-color:var(--nl-accent)} .nl-code-copy.ok{background:var(--nl-accent);color:var(--nl-on-accent);border-color:var(--nl-accent)} /* ---------- TABLA ---------- */ .nl-tabla-wrap{margin:16px 0;overflow-x:auto} /* no rompe el ancho en móvil */ .nl-tabla{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--nl-ink)} .nl-tabla th,.nl-tabla td{ text-align:left;padding:9px 14px; border-bottom:1px solid var(--nl-line); vertical-align:top; } .nl-tabla thead th{ font-family:var(--nl-display);font-weight:700; color:var(--nl-accent-strong); border-bottom:2px solid var(--nl-line); white-space:nowrap; } .nl-tabla tbody tr:last-child td{border-bottom:none} .nl-tabla tbody tr:hover{background:color-mix(in srgb,var(--nl-accent) 5%,transparent)} /* ---------- HERRAMIENTA EMBEBIDA (fragmento en línea) ---------- El motor parte el

y cuelga .nl-embed de .nl-wrap, así la herramienta dispone de ~1044px (sus dos columnas). El fragmento fluye con su propia altura; sin iframe, sin min-height. */ .nl-embed{ margin:32px 0; padding-top:28px; border-top:1px solid var(--nl-line); /* separador sutil arriba */ } /* aviso cuando la herramienta no existe (en vez de algo roto) */ .nl-embed-falta{ margin:20px 0;padding:16px 18px; border:1px dashed color-mix(in srgb,var(--nl-c-coral) 55%,var(--nl-line)); border-radius:var(--nl-radius); background:color-mix(in srgb,var(--nl-c-coral) 8%,transparent); color:var(--nl-ink);font-size:.92rem; }