/* Theme Name: Core UI Description: Tema ligero (vanilla HTML/CSS/JS, sin frameworks ni dependencias de terceros). Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GPLv2 or later Text Domain: creanombres */ /* ============================================================ Design tokens — Claymorphism pass. No font-weight is used anywhere EXCEPT on real nickname/kaomoji/symbol content (see --font-data below): those strings must render with whatever weight/font makes their Unicode glyphs look authentic, since that's exactly what gets pasted into Free Fire/Roblox/etc. Everywhere else, hierarchy comes from size + color + spacing. ============================================================ */ :root{ --bg:#FFFAF6; --bg-alt:#FFF1E9; --surface:#FFFFFF; --input:#FFF6F0; --ink:#2B211C; --ink-2:#46392F; --muted:#5A4A3F; --muted-2:#7C6A5E; --muted-3:#9C8578; --muted-4:#AC988B; --accent:#F4503C; --accent-2:#FF7E63; --accent-dark:#C53B2A; --accent-ink:#FFF7F4; --blue:#2563EB; --blue-dark:#1D4ED8; --blue-bg:#E8EFFE; --blue-ink:#FFFFFF; --border:#F5E0D3; --border-2:#EFD0BE; --border-3:#E2D8C7; --dash:#E3C4AF; --ok-bg:#DCF3E4; --ok-fg:#2E8B57; --hot-bg:#FFE0D6; --hot-fg:#F4503C; --down-bg:#F5E7DE; --down-fg:#A08A7C; --key-bg:#FFF3D6; --key-bd:#E8B84B; --key-fg:#8A6117; --gold-ring:#E8B84B; --bronze-ring:#C9A38C; --rank:#C9BCA4; --wrap:1060px; --mono:ui-monospace,Menlo,Consolas,monospace; /* UI chrome typography — headings use Fredoka, body uses Nunito. Each is self-hosted at a single static weight (no variable range), so no font-weight declaration ever changes how they look. */ --font-head:'Fredoka',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-body:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* Real generated content (typed name, decorated nicknames, kaomoji, symbols) — broad-coverage system stack so combining marks / symbol ranges never fall back to tofu boxes, and font-weight is allowed. */ --font-data:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; --radius-card:20px; --radius-sm:13px; --radius-pill:999px; --border-w:2px; --shadow-clay:0 1px 0 rgba(60,45,20,.05), 0 10px 22px -8px rgba(60,45,20,.14); --shadow-clay-sm:0 1px 0 rgba(60,45,20,.04), 0 4px 11px -3px rgba(60,45,20,.12); --press:translateY(2px); --nav-h:64px; } /* ============================================================ Reset / base ============================================================ */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block;} a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;} button{font-family:inherit;} input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;} .wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;} /* ============================================================ Header / nav ============================================================ */ .site-header{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 28px;border-bottom:1px solid var(--border); background:var(--bg);position:sticky;top:0;z-index:50; } .brand{display:flex;align-items:baseline;gap:2px;font-family:var(--font-head);font-size:22px;letter-spacing:-.5px;color:var(--ink);} .brand:hover{text-decoration:none;} .brand .b-crea{color:var(--accent);} .brand .b-tld{color:var(--muted-3);font-size:14.5px;margin-left:4px;} .main-nav{display:flex;gap:22px;font-family:var(--font-head);font-size:15.5px;color:#6E5B50;flex-wrap:wrap;} .main-nav a{color:inherit;} .main-nav a:hover,.main-nav a.is-active{color:var(--accent);text-decoration:none;} .nav-toggle{display:none;background:none;border:0;font-size:25px;cursor:pointer;color:var(--ink);line-height:1;} /* ============================================================ Generic sections / headings ============================================================ */ .section{max-width:var(--wrap);margin:0 auto;padding:38px 24px;} .section--band{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .section--band .section-inner{max-width:var(--wrap);margin:0 auto;padding:38px 24px;} .h-xl{margin:0;font-family:var(--font-head);font-size:clamp(28px,4.2vw,42px);letter-spacing:-1px;line-height:1.08;} .h-lg{margin:0;font-family:var(--font-head);font-size:26px;letter-spacing:-.4px;} .h-md{margin:0;font-family:var(--font-head);font-size:20px;} .lead{margin:0;font-family:var(--font-body);font-size:16.5px;color:var(--muted-2);max-width:640px;line-height:1.6;} .muted{color:var(--muted-3);} .eyebrow{font-family:var(--font-head);font-size:13px;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;} /* ============================================================ Generator tool ============================================================ */ .gen{max-width:var(--wrap);margin:0 auto;padding:44px 24px 20px;} .gen-head{display:flex;flex-direction:column;gap:8px;margin-bottom:26px;} .gen-card{ background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card); padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-clay); } .gen-input{ width:100%;font-family:var(--font-data);font-size:27px;font-weight:700;padding:20px 22px;border:none;border-radius:var(--radius-sm); background:var(--input);color:var(--ink);letter-spacing:-.3px; } .gen-selects{display:flex;gap:10px;flex-wrap:wrap;} .gen-field{ flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:0 14px; background:var(--bg);border:var(--border-w) solid var(--border-2);border-radius:var(--radius-sm); } .gen-field-ico{font-size:18px;flex:none;} .gen-field select{ flex:1;min-width:0;font-family:var(--font-body);font-size:16px;padding:13px 4px;border:none;background:transparent; color:var(--ink);cursor:pointer; } .gen-btn{ width:100%;display:flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-head);padding:18px 26px;font-size:19px;background:var(--accent);color:var(--accent-ink); border:none;border-radius:var(--radius-sm);cursor:pointer;letter-spacing:-.2px; box-shadow:0 4px 0 var(--accent-dark);transition:transform .12s,box-shadow .12s,filter .15s; } .gen-btn:hover{filter:brightness(1.05);} .gen-btn:active{transform:var(--press);box-shadow:0 1px 0 var(--accent-dark);} .gen-btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:0 4px 0 var(--accent-dark);} .gen-hint{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-body);font-size:14.5px;color:var(--muted-3);text-align:center;flex-wrap:wrap;} .kbd{padding:1px 7px;background:var(--key-bg);border:1px solid var(--key-bd);border-radius:5px;font-family:var(--mono);font-size:14px;color:var(--key-fg);} .gen-error{display:none;margin-top:14px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--hot-bg);color:var(--hot-fg);font-family:var(--font-body);font-size:15.5px;} .gen-error.is-visible{display:block;} /* Results — natural width, not forced into equal grid cells */ .results{margin-top:22px;display:flex;flex-direction:column;gap:12px;} .results[hidden]{display:none;} .results-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .grid-cards{display:flex;flex-wrap:wrap;gap:10px;} .copychip{ display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px; flex:1 1 auto;min-width:150px;max-width:260px; background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);cursor:pointer; text-align:left;font-family:inherit;box-shadow:var(--shadow-clay-sm);transition:border-color .12s,background .12s,transform .1s; } .copychip:hover{border-color:var(--accent);background:var(--input);} .copychip:active{transform:var(--press);} .copychip .cc-text{font-family:var(--font-data);font-size:17px;white-space:nowrap;color:var(--ink);} .copychip .cc-badge{font-family:var(--font-head);font-size:13px;color:var(--accent);flex:none;} /* loading */ .gen.is-loading .gen-btn{opacity:.6;cursor:progress;} /* ── "AI thinking" panel ─────────────────────────────── */ .gen-thinking{ margin-top:22px;display:flex;align-items:center;gap:16px; background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card); padding:18px 20px;box-shadow:var(--shadow-clay-sm); overflow:hidden;position:relative; } .gen-thinking[hidden]{display:none;} .gen-thinking::after{ /* sheen sweep */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 30%,rgba(244,80,60,.06) 50%,transparent 70%); background-size:200% 100%;animation:gtsheen 1.6s ease-in-out infinite; } @keyframes gtsheen{0%{background-position:150% 0}100%{background-position:-50% 0}} .gt-orb{ width:40px;height:40px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 30%,#FFE1D6,var(--accent) 78%); animation:gtpulse 1.4s ease-in-out infinite; } @keyframes gtpulse{ 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(244,80,60,.35)} 50%{transform:scale(1.09);box-shadow:0 0 0 12px rgba(244,80,60,0)} } .gt-content{min-width:0;flex:1;} .gt-title{margin:0 0 8px;font-family:var(--font-head);font-size:15.5px;letter-spacing:-.2px;color:var(--ink);} .gt-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;} .gt-step{ display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:15px;color:var(--muted-3); opacity:.5;transform:translateY(2px);transition:opacity .3s,color .3s,transform .3s; } .gt-step::before{ content:"";width:16px;height:16px;border-radius:50%;flex:none;box-sizing:border-box; border:2px solid var(--border-2);transition:.2s; } .gt-step.is-active{opacity:1;transform:none;color:var(--ink);} .gt-step.is-active::before{ border-color:var(--accent);border-top-color:transparent;animation:gtspin .6s linear infinite; } .gt-step.is-done{opacity:1;transform:none;color:var(--muted);} .gt-step.is-done::before{ content:"✓";border:none;color:var(--accent);font-weight:900;font-size:15.5px;line-height:1; display:flex;align-items:center;justify-content:center; } @keyframes gtspin{to{transform:rotate(360deg)}} /* staggered result reveal ("chậm chậm từng dòng") */ @keyframes cardIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}} .copychip.reveal{opacity:0;animation:cardIn .4s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s);} /* -------------------------------------------------- UGC (community apodos) */ .ugc{max-width:var(--wrap);margin:26px auto 0;display:flex;flex-direction:column;gap:26px;} .ugc[hidden]{display:none;} .ugc-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px;color:var(--muted-2);font-family:var(--font-body);font-size:15.5px; border:1px dashed var(--dash);border-radius:var(--radius-card);background:var(--bg-alt);} .ugc-loading[hidden]{display:none;} .ugc-orb{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--border-2);border-top-color:var(--accent);animation:gtspin .7s linear infinite;flex:none;} .ugc-body[hidden]{display:none;} .ugc-block{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--border);} .ugc-block:first-child{border-top:0;padding-top:0;} .ugc-h{margin:0;font-family:var(--font-head);font-size:17px;color:var(--ink);} .ugc-empty{margin:2px 0;color:var(--muted-2);font-family:var(--font-body);font-size:15.5px;} .ugc-empty[hidden]{display:none;} /* community chips: nickname + like counter */ .ugc-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px; flex:1 1 auto;min-width:150px;max-width:260px; background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-clay-sm);} .ugc-chip .cc-text{font-family:var(--font-data);font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);cursor:pointer;flex:1;min-width:0;} .ugc-chip:hover{border-color:var(--border-2);} .ugc-chip:hover .cc-text{color:var(--accent);} .ugc-chip.reveal{opacity:0;animation:cardIn .4s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s);} .ugc-like{flex:none;display:inline-flex;align-items:center;gap:3px;padding:4px 9px;font-family:var(--font-head);font-size:14.5px; background:var(--bg-alt);border:1px solid var(--border-2);border-radius:var(--radius-pill);color:var(--muted);cursor:pointer;line-height:1;transition:.15s;} .ugc-like:hover{border-color:var(--accent);color:var(--accent);} .ugc-like.is-liked{background:var(--hot-bg);border-color:var(--hot-fg);color:var(--hot-fg);cursor:default;} .ugc-like-n{font-variant-numeric:tabular-nums;} /* bookmark/save toggle, added to copyable result chips */ .cc-save{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0; background:transparent;border:0;border-radius:50%;color:var(--muted-3);cursor:pointer;font-size:18px;line-height:1;transition:.15s;} .cc-save:hover{background:var(--bg-alt);color:var(--accent);} .cc-save.is-saved{color:var(--accent);} .cc-save svg{width:18px;height:18px;display:block;} /* "ver más" */ .ugc-more-wrap{display:flex;justify-content:center;} .ugc-more{padding:11px 22px;font-family:var(--font-head);font-size:15.5px;background:var(--surface); border:var(--border-w) solid var(--border-2);border-radius:var(--radius-sm);color:var(--ink-2);cursor:pointer;transition:.15s;} .ugc-more:hover{border-color:var(--accent);color:var(--accent);} .ugc-more[hidden]{display:none;} .ugc-more:disabled{opacity:.55;cursor:default;} /* contribute box */ .ugc-form{display:flex;gap:10px;flex-wrap:wrap;} .ugc-input{flex:1;min-width:200px;padding:13px 15px;font-family:var(--font-data);font-size:16px;color:var(--ink); background:var(--input);border:var(--border-w) solid var(--border-2);border-radius:var(--radius-sm);} .ugc-submit{padding:13px 22px;font-family:var(--font-head);font-size:16px;background:var(--accent);color:var(--accent-ink); border:0;border-radius:var(--radius-sm);cursor:pointer;box-shadow:0 3px 0 var(--accent-dark);transition:.15s;} .ugc-submit:hover{filter:brightness(1.05);} .ugc-submit:active{transform:var(--press);box-shadow:0 1px 0 var(--accent-dark);} .ugc-submit:disabled{opacity:.6;cursor:default;} .ugc-note{font-family:var(--font-body);font-size:14px;margin:0;} /* "Nombres más creados" feed (7 / 28-day rolling) */ .ugc-trend-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;} .ugc-trend-toggle{display:inline-flex;gap:2px;padding:2px;background:var(--bg-alt);border:1px solid var(--border-2);border-radius:var(--radius-pill);} .ugc-trend-toggle button{padding:5px 12px;font-family:var(--font-head);font-size:14px;border:0;border-radius:16px; background:transparent;color:var(--muted-2);cursor:pointer;transition:.15s;} .ugc-trend-toggle button.is-active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.06);} .ugc-recent-list[hidden]{display:none;} .ugc-recent-list{display:flex;flex-wrap:wrap;gap:8px;} .ugc-recent-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 9px 7px 13px;font-family:var(--font-body);font-size:15.5px; flex:1 1 auto;min-width:80px;max-width:260px;justify-content:center; background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--ink-2);cursor:pointer;transition:.15s;} .ugc-recent-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--input);} .ugc-recent-chip .urc-name{font-family:var(--font-data);white-space:nowrap;} .ugc-recent-chip .urc-count{font-family:var(--font-head);font-size:14px;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:12px; background:var(--hot-bg);color:var(--hot-fg);line-height:1;} @media (max-width:520px){ .gen-thinking{gap:12px;padding:14px 16px;} .gt-orb{width:32px;height:32px;} .ugc-input{min-width:0;} } /* ============================================================ Hub (homepage routing to sub-pages) ============================================================ */ .grid-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;} .hub-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);color:inherit;box-shadow:var(--shadow-clay-sm);transition:border-color .12s,transform .12s,box-shadow .12s;} .hub-card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-clay);} .hub-ico{font-size:27px;flex:none;line-height:1;} .hub-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;} .hub-title{font-family:var(--font-head);font-size:17px;letter-spacing:-.2px;color:var(--ink);} .hub-desc{font-family:var(--font-body);font-size:14.5px;color:var(--muted-2);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .hub-arrow{flex:none;font-size:19px;color:var(--dash);} .hub-card:hover .hub-arrow{color:var(--accent);} /* ============================================================ Trends / podium ============================================================ */ .grid-trends{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px;margin-bottom:34px;} .trend{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-clay-sm);} .trend .t-rank{font-family:var(--font-head);font-size:14.5px;color:var(--rank);flex:none;} .trend .t-name{font-family:var(--font-data);font-weight:700;font-size:16px;flex:none;} .trend .t-count{font-family:var(--font-body);font-size:14px;color:#9A8C74;} .badge{margin-left:auto;font-family:var(--font-head);font-size:13px;padding:3px 8px;border-radius:var(--radius-pill);flex:none;} .badge--up{background:var(--ok-bg);color:var(--ok-fg);} .badge--hot{background:var(--hot-bg);color:var(--hot-fg);} .badge--down{background:var(--down-bg);color:var(--down-fg);} .row-between{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:22px;} .link-more{font-family:var(--font-head);font-size:15px;color:var(--accent);} .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;margin-bottom:20px;} .podium-item{ cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px; padding:16px 12px;background:var(--surface);border:3px solid var(--border-2);border-radius:var(--radius-card);text-align:center; box-shadow:var(--shadow-clay-sm);transition:transform .12s; } .podium-item:active{transform:var(--press);} .podium-item .p-medal{font-size:23px;} .podium-item .p-face{font-family:var(--font-data);font-size:21px;line-height:1.15;word-break:break-word;} .podium-item .p-cat{font-family:var(--font-head);font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--rank);} .podium-item .p-pill{font-family:var(--font-head);font-size:14px;padding:3px 10px;border-radius:var(--radius-pill);} .podium-item.p1{height:178px;border-color:var(--accent);box-shadow:0 3px 0 var(--accent);transform:rotate(-1deg);} .podium-item.p1 .p-pill{background:var(--accent);color:var(--accent-ink);} .podium-item.p2{height:150px;border-color:var(--gold-ring);box-shadow:0 3px 0 var(--gold-ring);transform:rotate(-2deg);} .podium-item.p2 .p-pill{background:var(--key-bg);color:var(--key-fg);} .podium-item.p3{height:134px;border-color:var(--bronze-ring);box-shadow:0 3px 0 var(--bronze-ring);transform:rotate(2deg);} .podium-item.p3 .p-pill{background:var(--bg-alt);color:#9C6B4E;} .hint-center{margin:0 0 12px;font-family:var(--font-body);font-size:14.5px;color:var(--muted-3);text-align:center;} /* Natural item width, but each row's items share out the leftover space evenly (flex-grow) instead of packing left with a ragged gap on the right — on mobile especially, a row of differently-sized items left as-is reads as "some stick out, some tuck in"; growing them to fill the row fixes that without forcing every item to the same fixed width (which is what made them look squeezed/unnatural in the first place). */ .grid-kaomoji{display:flex;flex-wrap:wrap;gap:8px;} .kao{cursor:pointer;display:flex;align-items:center;gap:12px;padding:11px 14px;flex:1 1 auto;min-width:150px;max-width:260px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);transition:border-color .12s,background .12s;} .kao:hover{border-color:var(--accent);background:var(--input);} .kao .k-rank{font-family:var(--font-head);font-size:14.5px;color:var(--rank);flex:none;width:18px;} .kao .k-face{font-family:var(--font-data);font-size:18px;white-space:nowrap;} .kao .k-cat{margin-left:auto;font-family:var(--font-head);font-size:12px;letter-spacing:.5px;color:var(--rank);text-transform:uppercase;flex:none;} .kao .k-count{font-family:var(--font-head);font-size:14.5px;color:var(--muted);flex:none;} /* ============================================================ Chips (populares / ideas / article) ============================================================ */ .chips{display:flex;flex-wrap:wrap;gap:9px;} .chip{cursor:pointer;padding:9px 14px;text-align:center;flex:1 1 auto;min-width:80px;max-width:260px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-data);font-size:16px;transition:border-color .12s;user-select:all;} .chip:hover{border-color:var(--accent);} /* Symbols grid: same flex-grow-to-fill-the-row rule as every other item grid on this page (.grid-cards/.grid-kaomoji/.chips/.ugc-recent-list) — one consistent pattern everywhere, not a special case. The one thing symbols specifically needed on top: white-space:nowrap, because entries here run 1 to ~16 characters and without it a long one wrapped inside the box onto 2-3 lines, which is what looked like a tangled mess. */ .grid-symbols{display:flex;flex-wrap:wrap;gap:8px;} .sym{cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:52px;min-width:52px;padding:6px 12px;flex:1 1 auto;max-width:260px;white-space:nowrap;background:var(--surface);border:1px solid var(--border-3);border-radius:var(--radius-sm);font-family:var(--font-data);font-size:19px;transition:border-color .12s;} .sym:hover{border-color:var(--accent);} /* ideas cards */ .grid-ideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;} .idea-card{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:18px;box-shadow:var(--shadow-clay-sm);} .idea-card h3{margin:0 0 10px;font-family:var(--font-head);font-size:16px;color:var(--accent);} .chips--sm .chip{padding:6px 11px;background:var(--bg);font-size:15px;} .tips{margin-top:24px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:20px 22px;} .tips h3{margin:0 0 10px;font-family:var(--font-head);font-size:17px;} .tips ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-family:var(--font-body);font-size:15.5px;color:var(--muted);line-height:1.5;} /* ============================================================ FAQ (SEO) ============================================================ */ .faq{display:flex;flex-direction:column;gap:10px;} .faq-item{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:4px 20px;box-shadow:var(--shadow-clay-sm);} .faq-q{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--font-head);font-size:17px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px;} .faq-q::-webkit-details-marker{display:none;} .faq-q::after{content:"+";font-family:var(--font-head);font-size:21px;color:var(--accent);flex:none;transition:transform .18s;} .faq-item[open] .faq-q::after{transform:rotate(45deg);} .faq-a{margin:0 0 16px;font-family:var(--font-body);font-size:16px;color:var(--muted);line-height:1.6;} /* ============================================================ Feedback widget ("¿Te resultó útil?") ============================================================ */ .feedback{margin-top:34px;padding:20px 22px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow-clay-sm);} .feedback-q{font-family:var(--font-head);font-size:16px;color:var(--ink);} .feedback-actions{display:flex;gap:10px;} .feedback-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;font-family:var(--font-head);font-size:15.5px;color:var(--ink-2);background:var(--bg);border:var(--border-w) solid var(--border-2);border-radius:var(--radius-pill);cursor:pointer;transition:.15s;} .feedback-btn:hover{border-color:var(--accent);color:var(--accent);} .feedback-btn.is-voted{background:var(--hot-bg);border-color:var(--hot-fg);color:var(--hot-fg);cursor:default;} .feedback-btn:disabled{opacity:.55;cursor:default;} .feedback-thanks{font-family:var(--font-body);font-size:15px;color:var(--muted-2);} .feedback-thanks[hidden]{display:none;} /* ============================================================ Blog archive ============================================================ */ .page-main{max-width:860px;margin:0 auto;padding:44px 24px 60px;} .page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;} .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;} .fchip{padding:7px 14px;background:var(--surface);border:var(--border-w) solid var(--border-2);border-radius:var(--radius-pill);font-family:var(--font-head);font-size:14.5px;color:#6E5B50;} .fchip:hover{text-decoration:none;border-color:var(--accent);color:var(--accent);} .fchip.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);} .post-row{display:flex;gap:20px;align-items:center;color:inherit;padding:20px 0;border-bottom:1px solid var(--border);} .post-row:hover{text-decoration:none;} .post-row .pr-thumb{flex:none;width:168px;height:110px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center;} .post-row .pr-thumb img{width:100%;height:100%;object-fit:cover;} .post-row .pr-body{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1;} .post-row h3{margin:0;font-family:var(--font-head);font-size:19px;line-height:1.3;color:var(--ink);} .post-row:hover h3{color:var(--accent);} .post-row .pr-ex{margin:0;font-family:var(--font-body);font-size:15px;color:var(--muted-2);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .post-row .pr-meta{font-family:var(--font-head);font-size:14px;color:var(--muted-4);} .post-row .pr-arrow{flex:none;font-size:19px;color:var(--dash);} .post-feat{display:flex;gap:24px;align-items:stretch;color:inherit;padding:26px 0;border-bottom:1px solid var(--border);} .post-feat:hover{text-decoration:none;} .post-feat .pf-thumb{flex:none;width:300px;height:190px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;align-items:center;justify-content:center;} .post-feat .pf-thumb img{width:100%;height:100%;object-fit:cover;} .post-feat .pf-body{display:flex;flex-direction:column;gap:10px;justify-content:center;min-width:0;} .post-feat h2{margin:0;font-family:var(--font-head);font-size:clamp(19px,2.6vw,26px);letter-spacing:-.5px;line-height:1.22;color:var(--ink);} .post-feat:hover h2{color:var(--accent);} .post-feat .pf-ex{margin:0;font-family:var(--font-body);font-size:16px;color:var(--muted-2);line-height:1.55;} .tag-pill{padding:3px 10px;background:var(--hot-bg);color:var(--accent);border-radius:var(--radius-pill);font-family:var(--font-head);font-size:13px;text-transform:uppercase;letter-spacing:.5px;} .thumb-ph{font-family:var(--mono);font-size:12.5px;color:var(--muted-4);border:1.5px dashed var(--dash);padding:4px 8px;border-radius:5px;} /* pagination */ .pager{display:flex;justify-content:center;gap:8px;margin-top:30px;flex-wrap:wrap;} .pager a,.pager span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:var(--border-w) solid var(--border-2);border-radius:var(--radius-sm);font-family:var(--font-head);font-size:15.5px;color:#6E5B50;} .pager a:hover{text-decoration:none;border-color:var(--accent);color:var(--accent);} .pager .current{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);} /* ============================================================ Single post (article + tool variants) ============================================================ */ .single-head,.single-hero,.single-body{max-width:760px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;} .single-head{padding-top:40px;} .single-hero{margin:0 auto 24px;} .single--tool .single-head,.single--tool .single-hero{max-width:1060px;} .single--tool .single-body{margin-top:8px;} .single-body{max-width:760px;} .single .related{margin-top:8px;} /* ============================================================ Single article (legacy .article wrapper, still used elsewhere) ============================================================ */ .article{max-width:760px;margin:0 auto;padding:44px 24px 30px;} .breadcrumb{display:flex;gap:8px;font-family:var(--font-head);font-size:14.5px;color:var(--muted-4);margin-bottom:18px;flex-wrap:wrap;} .breadcrumb a{color:inherit;} .article h1{margin:0 0 16px;font-family:var(--font-head);font-size:clamp(28px,4.5vw,42px);letter-spacing:-1px;line-height:1.12;} .byline{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:26px;} .avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:15.5px;flex:none;overflow:hidden;} .byline .b-name{font-family:var(--font-head);font-size:15.5px;display:block;} .byline .b-meta{font-family:var(--font-body);font-size:14px;color:var(--muted-4);} .hero{border-radius:var(--radius-card);overflow:hidden;margin-bottom:28px;background:var(--bg-alt);border:1px solid var(--border);} .hero img{width:100%;display:block;} .article-body{font-family:var(--font-body);font-size:17.5px;line-height:1.75;color:var(--ink-2);} .article-body>*{margin:0 0 22px;} .article-body>*:last-child{margin-bottom:0;} .article-body h2{margin:14px 0 0;font-family:var(--font-head);font-size:25px;letter-spacing:-.5px;color:var(--ink);scroll-margin-top:80px;} .article-body h3{margin:12px 0 0;font-family:var(--font-head);font-size:20px;color:var(--ink);scroll-margin-top:80px;} .article-body a{text-decoration:underline;} .article-body img{border-radius:var(--radius-card);margin-left:auto;margin-right:auto;} .article-body blockquote{padding:18px 22px;background:var(--bg-alt);border-radius:var(--radius-card);font-size:16.5px;color:var(--muted);border-left:0;} .article-body ul,.article-body ol{padding-left:20px;display:flex;flex-direction:column;gap:6px;} .article-body code{font-family:var(--mono);background:var(--bg-alt);padding:2px 6px;border-radius:5px;font-size:.9em;} .article-body pre{background:var(--ink);color:var(--bg);padding:16px;border-radius:var(--radius-card);overflow-x:auto;} .article-body pre code{background:none;padding:0;color:inherit;} .article-body table{width:100%;border-collapse:collapse;} .article-body th,.article-body td{border:1px solid var(--border);padding:8px 12px;text-align:left;} .toc{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:18px 22px;margin-bottom:32px;} .toc-title{display:block;font-family:var(--font-head);font-size:14px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted-3);margin-bottom:10px;} .cta{margin-top:36px;background:var(--surface);border:var(--border-w) solid var(--accent);border-radius:var(--radius-card);padding:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;box-shadow:var(--shadow-clay-sm);} .cta .c-title{font-family:var(--font-head);font-size:19px;letter-spacing:-.3px;display:block;} .cta .c-sub{font-family:var(--font-body);font-size:15.5px;color:var(--muted-2);} .btn-accent{padding:12px 24px;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);font-family:var(--font-head);font-size:16px;box-shadow:0 3px 0 var(--accent-dark);transition:.15s;} .btn-accent:hover{text-decoration:none;filter:brightness(1.05);} .btn-accent:active{transform:var(--press);box-shadow:0 1px 0 var(--accent-dark);} .related{max-width:760px;margin:0 auto;padding:10px 24px 56px;} .grid-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;} .rel-card{color:inherit;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-card);padding:18px;display:flex;flex-direction:column;gap:8px;transition:border-color .12s;} .rel-card:hover{border-color:var(--accent);text-decoration:none;} .rel-card .r-title{font-family:var(--font-head);font-size:16px;line-height:1.35;color:var(--ink);} /* ============================================================ Plain page / 404 ============================================================ */ .prose{max-width:760px;margin:0 auto;padding:44px 24px 60px;} .prose h1{margin:0 0 16px;font-family:var(--font-head);font-size:clamp(26px,4vw,38px);letter-spacing:-1px;line-height:1.12;} .page-404{max-width:760px;margin:0 auto;padding:80px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;} .page-404 .big{font-family:var(--font-head);font-size:clamp(64px,14vw,120px);letter-spacing:-4px;color:var(--accent);line-height:1;} /* ============================================================ Footer / toast ============================================================ */ .site-footer{border-top:1px solid var(--border);background:var(--bg-alt);margin-top:20px;} .site-footer .f-inner{max-width:var(--wrap);margin:0 auto;padding:26px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;} .f-brand{font-family:var(--font-head);font-size:17px;} .f-brand .b-crea{color:var(--accent);} .f-brand .b-tld{color:var(--muted-3);font-size:14px;} .f-nav{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--font-body);font-size:14.5px;color:var(--muted-2);} .f-nav a{color:inherit;} .f-copy{font-family:var(--font-body);font-size:14px;color:var(--muted-4);} /* footer gallery images, when provided */ .f-gallery{display:flex;flex-wrap:wrap;gap:8px;width:100%;order:3;margin-top:4px;} .f-gallery img{width:72px;height:72px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);} .toast{ position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(10px); background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:var(--radius-pill);font-family:var(--font-head);font-size:15.5px; z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s; } .toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);} /* Back to top — sitewide, printed by footer.php */ .to-top{ position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px)); width:46px;height:46px;display:grid;place-items:center; background:var(--surface);color:var(--accent); border:var(--border-w) solid var(--border-2);border-radius:50%; box-shadow:var(--shadow-clay-sm); cursor:pointer;z-index:90;padding:0; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s,transform .2s,visibility .2s,background .15s,color .15s,bottom .15s; } .to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);} .to-top:hover,.to-top:focus-visible{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);} .to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .to-top svg{width:20px;height:20px;display:block;} @media print{.to-top{display:none;}} /* ============================================================ Mobile bottom navigation + Saved sheet + Menu drawer ============================================================ */ .bottom-nav{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:95; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); background:var(--surface);border-top:var(--border-w) solid var(--border); box-shadow:0 -6px 18px rgba(60,45,20,.08); } .bn-list{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;max-width:520px;margin:0 auto;} .bn-item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px; background:none;border:0;color:var(--muted-3);font-family:var(--font-head);font-size:12.5px;cursor:pointer; } .bn-item svg{width:22px;height:22px;display:block;} .bn-item.is-active{color:var(--accent);} .bn-item.bn-create{position:relative;color:var(--accent-ink);} .bn-create-circle{ width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:linear-gradient(145deg,var(--accent-2),var(--accent));box-shadow:var(--shadow-clay); transform:translateY(-16px); } .bn-create-circle svg{width:24px;height:24px;} .bn-item.bn-create span{margin-top:-10px;color:var(--muted-3);} @media (max-width:760px){ .bottom-nav{display:block;} body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));} .to-top{bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom,0px));} } @media (max-width:520px){ .to-top{right:14px;width:42px;height:42px;} } /* Saved sheet + Menu drawer share the same bottom-sheet mechanics */ .sheet-backdrop{position:fixed;inset:0;background:rgba(43,33,28,.4);z-index:120;opacity:0;pointer-events:none;transition:opacity .2s;} .sheet-backdrop.is-open{opacity:1;pointer-events:auto;} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:121;max-height:78vh;display:flex;flex-direction:column; background:var(--surface);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px rgba(60,45,20,.18); transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.3,1); padding:10px 20px calc(18px + env(safe-area-inset-bottom,0px)); } .sheet.is-open{transform:translateY(0);} .sheet-grip{width:36px;height:4px;border-radius:999px;background:var(--border-2);margin:4px auto 14px;flex:none;} .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex:none;} .sheet-title{font-family:var(--font-head);font-size:18px;color:var(--ink);} .sheet-close{background:none;border:0;font-size:21px;color:var(--muted-3);cursor:pointer;padding:4px;line-height:1;} .sheet-body{overflow-y:auto;} .saved-list{display:flex;flex-direction:column;gap:8px;} .saved-empty{font-family:var(--font-body);font-size:15.5px;color:var(--muted-2);text-align:center;padding:30px 0;} .saved-empty[hidden]{display:none;} .saved-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);} .saved-item .cc-text{flex:1;min-width:0;font-family:var(--font-data);font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;} .saved-item .saved-remove{flex:none;background:none;border:0;color:var(--muted-3);font-size:17px;cursor:pointer;padding:4px;} .saved-item .saved-remove:hover{color:var(--hot-fg);} .menu-drawer-nav{display:flex;flex-direction:column;} .menu-drawer-nav a{padding:13px 2px;border-bottom:1px solid var(--border);font-family:var(--font-head);font-size:16.5px;color:var(--ink-2);} .menu-drawer-nav a:last-child{border-bottom:0;} .menu-drawer-nav a:hover{color:var(--accent);text-decoration:none;} .menu-drawer-legal{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;} .menu-drawer-legal a{font-family:var(--font-body);font-size:14.5px;color:var(--muted-2);} /* ============================================================ Responsive (narrow phones already covered by the 760px block above) ============================================================ */ @media (max-width:760px){ .site-header{padding:12px 18px;} .nav-toggle{display:block;} .main-nav{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--border); padding:8px 18px 16px; } .main-nav.is-open{display:flex;} .main-nav a{padding:10px 0;border-bottom:1px solid var(--border);} .post-feat{flex-direction:column;gap:14px;} .post-feat .pf-thumb{width:100%;height:auto;aspect-ratio:16/10;} .post-row{gap:14px;} .post-row .pr-thumb{width:110px;height:74px;} .post-row .pr-arrow{display:none;} .podium{gap:8px;} .podium-item{padding:12px 6px;} .podium-item .p-face{font-size:17px;} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important;} } /* ------------------------------------------------------------ Tighter phones (≤640px): the "double padding" fix. Outer section wrappers lose most of their side padding so inner cards (which keep their own padding) get materially more usable width instead of being squeezed by two nested insets. ------------------------------------------------------------ */ @media (max-width:640px){ .section, .section--band .section-inner, .gen, .article, .prose, .related, .page-main, .single-head,.single-hero,.single-body{ padding-left:12px;padding-right:12px; } .wrap{padding-left:12px;padding-right:12px;} .gen-card{padding:10px;} .gen-input{font-size:23px;padding:16px 16px;} } /* Tabla de contenidos automática del theme (sin plugin) ------------------ Clase propia `toc-auto`: los posts antiguos traen su