/* ============================================================= Tester QA — hoja de estilos única 1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía 5. Cabecera · 6. Hero + pestañas · 7. Tarjeta de herramienta 8. Salida · 9. Anuncios · 10. Secciones · 11. Pie 12. Responsive · 13. Movimiento reducido ============================================================= */ /* ============================================================= 1. Tokens El tema OSCURO es el de partida (así se sirve la página sin depender del sistema). El claro se activa con data-theme="light" desde el conmutador de la cabecera, y las preferencias de legibilidad viajan en otros data-* del . ============================================================= */ :root { color-scheme: dark; --bg: #0d1117; --bg-alt: #11161d; --surface: #161b22; --surface-2: #1b212b; --border: #262c36; --border-strong: #364152; --ink: #e6eaf0; --ink-2: #c3cbd6; --muted: #8d97a5; --accent: #8b93ff; --accent-ink: #0d1117; --accent-soft: #1c2140; --ok: #3ddc97; --ok-soft: #12291f; --bad: #ff8271; --bad-soft: #2b1614; --warn: #f0c069; --warn-soft: #2a2114; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .4); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --r-sm: 6px; --r: 10px; --r-lg: 14px; --gutter: clamp(1rem, 3vw, 2rem); --maxw: 1140px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Legibilidad (las controla el panel de la cabecera) */ --val-size: .86rem; --row-pad: .4rem .55rem; } :root[data-theme="light"] { color-scheme: light; --bg: #f6f7f9; --bg-alt: #eef1f5; --surface: #ffffff; --surface-2: #f9fafb; --border: #dfe3e9; --border-strong: #c8ceda; --ink: #111621; --ink-2: #38414f; --muted: #667085; --accent: #4338ca; --accent-ink: #ffffff; --accent-soft: #eef0ff; --ok: #0f7a52; --ok-soft: #e6f6ef; --bad: #b42318; --bad-soft: #fdecea; --warn: #8a5a00; --warn-soft: #fff6e5; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06); --shadow-lg: 0 8px 24px rgba(16, 24, 40, .08); } /* --- Tamaño del dato generado --- */ :root[data-size="grande"] { --val-size: 1rem; } :root[data-size="enorme"] { --val-size: 1.2rem; } /* --- Espaciado de las filas --- */ :root[data-espaciado="comodo"] { --row-pad: .6rem .7rem; } :root[data-espaciado="compacto"] { --row-pad: .24rem .5rem; } /* --- Alto contraste: sube el contraste del texto y de los bordes --- */ :root[data-contraste="si"] { --ink: #ffffff; --ink-2: #e9edf3; --muted: #b6c0cd; --border: #3d4654; --border-strong: #5b6675; --surface: #12171f; } :root[data-theme="light"][data-contraste="si"] { --ink: #000000; --ink-2: #1d2430; --muted: #4a5361; --border: #b6bdc9; --border-strong: #8d96a5; --surface: #ffffff; } /* ============================================================= 2. Reset y base ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, canvas, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } p { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.02em; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ============================================================= 3. Utilidades ============================================================= */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 999; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: var(--r-sm); font-weight: 600; } .skip-link:focus { top: 1rem; } .mono { font-family: var(--mono); font-variant-ligatures: none; } .nowrap { white-space: nowrap; } /* ============================================================= 4. Tipografía ============================================================= */ .h1 { font-size: clamp(1.6rem, 4.2vw, 2.4rem); font-weight: 800; } .lede { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.08rem); max-width: 68ch; } .h2 { font-size: clamp(1.3rem, 3.2vw, 1.7rem); font-weight: 750; } .h3 { font-size: 1.05rem; font-weight: 700; } .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* ============================================================= 5. Cabecera ============================================================= */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 60px; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .brand:hover { text-decoration: none; } .brand__mark { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: .78rem; font-weight: 800; font-family: var(--mono); } .brand__sub { color: var(--muted); font-weight: 500; font-size: .82rem; } .header-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .header-nav a { color: var(--ink-2); font-size: .88rem; font-weight: 550; padding: .4rem .6rem; border-radius: var(--r-sm); } .header-nav a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); } /* --- Herramientas de la cabecera: tema y legibilidad --- */ .header-tools { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 34px; height: 34px; padding: 0 .45rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out); } .iconbtn:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--border-strong); } .iconbtn svg { width: 17px; height: 17px; } .iconbtn__aa { font-family: var(--sans); font-size: .9rem; letter-spacing: -.03em; } /* el icono que toca según el tema */ .iconbtn .i-luna { display: none; } :root[data-theme="light"] .iconbtn .i-luna { display: block; } :root[data-theme="light"] .iconbtn .i-sol { display: none; } .prefs { position: relative; } .prefs > summary { list-style: none; } .prefs > summary::-webkit-details-marker { display: none; } .prefs[open] > summary { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .prefs__panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60; width: min(19rem, calc(100vw - 2rem)); padding: .85rem; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-lg); } .prefs__t { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; } .prefs__row { margin-bottom: .7rem; } .prefs__row:last-of-type { margin-bottom: .4rem; } .prefs__lab { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .3rem; } .seg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .seg button { flex: 1 1 0; padding: .34rem .3rem; font-size: .76rem; font-weight: 600; background: var(--surface); color: var(--muted); border-right: 1px solid var(--border); cursor: pointer; transition: background .12s var(--ease-out), color .12s var(--ease-out); } .seg button:last-child { border-right: 0; } .seg button:hover { background: var(--bg-alt); color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .prefs__reset { width: 100%; margin-top: .2rem; padding: .34rem; font-size: .74rem; font-weight: 600; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: none; cursor: pointer; } .prefs__reset:hover { color: var(--ink); border-color: var(--ink-2); } /* ============================================================= 6. Hero + pestañas ============================================================= */ .hero { padding-block: clamp(1.2rem, 3vw, 2rem) .6rem; } /* -block: no pisa el padding lateral de .wrap */ .hero__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; } .chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: .22rem .55rem; border-radius: 999px; } .chip--ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .hero .lede { margin-top: .5rem; } .tabs { display: flex; gap: .35rem; overflow-x: auto; overscroll-behavior-x: contain; padding: .8rem 0 .2rem; margin-bottom: .2rem; scrollbar-width: thin; } .tabs::-webkit-scrollbar { height: 6px; } .tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); padding: .48rem .8rem; border-radius: 999px; transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out); } .tab:hover { border-color: var(--border-strong); } .tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .tab__n { font-family: var(--mono); font-size: .7rem; opacity: .7; } .panel[hidden] { display: none; } .tool-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; padding-bottom: .5rem; } /* ============================================================= 7. Tarjeta de herramienta ============================================================= */ .tool { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(.9rem, 2vw, 1.15rem); display: flex; flex-direction: column; gap: .8rem; scroll-margin-top: 90px; } .tool--wide { grid-column: 1 / -1; } .tool:target, .tool.is-flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tool__head { display: flex; align-items: flex-start; gap: .6rem; } .tool__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; } .tool__title a { color: inherit; } .tool__desc { color: var(--muted); font-size: .85rem; margin-top: .15rem; } .tool__warn { display: flex; gap: .5rem; align-items: flex-start; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); border-radius: var(--r); padding: .5rem .65rem; font-size: .8rem; font-weight: 550; } .controls { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .ctrl { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .ctrl--full { grid-column: 1 / -1; } .ctrl > label, .ctrl__label { font-size: .74rem; font-weight: 650; color: var(--muted); letter-spacing: .01em; } .ctrl select, .ctrl input[type="text"], .ctrl input[type="number"], .ctrl textarea { width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .45rem .55rem; font-size: .88rem; transition: border-color .15s var(--ease-out); } .ctrl select { appearance: none; padding-right: 1.8rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .ctrl textarea { font-family: var(--mono); font-size: .8rem; line-height: 1.5; resize: vertical; } .ctrl select:focus, .ctrl input:focus, .ctrl textarea:focus { border-color: var(--accent); outline: none; } .ctrl__hint { font-size: .72rem; color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: .3rem; } .chips label { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); padding: .22rem .5rem; border-radius: 999px; cursor: pointer; user-select: none; } .chips input { accent-color: var(--accent); width: 13px; height: 13px; } .chips label:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* constructor de esquema JSON */ .schema { display: flex; flex-direction: column; gap: .35rem; } .schema__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .35rem; } .schema__row input, .schema__row select { min-width: 0; } .schema__del { width: 30px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); background: var(--surface-2); font-size: 1rem; line-height: 1; } .schema__del:hover { color: var(--bad); border-color: var(--bad); } /* acciones */ .actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .btn { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 650; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); padding: .48rem .75rem; transition: transform .12s var(--ease-out), background .15s var(--ease-out), border-color .15s var(--ease-out); } .btn:hover { border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--primary:hover { filter: brightness(1.08); } .btn--ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn--ghost:hover { color: var(--ink); background: var(--bg-alt); } .btn--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); } .btn svg { width: 15px; height: 15px; flex: 0 0 auto; } .qty { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .qty button { font-size: .8rem; font-weight: 650; color: var(--ink-2); padding: .45rem .6rem; background: var(--surface-2); border-right: 1px solid var(--border); } .qty button:last-child { border-right: 0; } .qty button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .actions__sep { flex: 1 1 auto; } /* ============================================================= 8. Salida ============================================================= */ .out { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); overflow: hidden; } .out__list { max-height: 340px; overflow: auto; overscroll-behavior: contain; } .row { display: flex; align-items: center; gap: .5rem; padding: var(--row-pad); border-bottom: 1px solid var(--border); } /* Filas alternas: ayuda a no perder el renglón en lotes de 50 o 100 */ :root[data-zebra="si"] .row:nth-child(even) { background: var(--surface-2); } /* El separador visual de los números largos no se copia (ver main.js) */ .row__v .g { letter-spacing: .04em; } .row:last-child { border-bottom: 0; } .row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); } .row__i { font-family: var(--mono); font-size: .68rem; color: var(--muted); min-width: 2ch; text-align: right; } .row__v { font-family: var(--mono); font-size: var(--val-size); flex: 1 1 auto; word-break: break-all; white-space: pre-wrap; line-height: 1.5; /* cifras de ancho fijo y cero barrado: leer y comparar códigos es más fácil */ font-variant-numeric: tabular-nums slashed-zero; } .row__meta { font-size: .72rem; color: var(--muted); flex: 0 1 auto; text-align: right; max-width: 42%; } .row__copy { flex: 0 0 auto; opacity: .45; padding: .2rem .3rem; border-radius: 4px; color: var(--muted); transition: opacity .15s var(--ease-out); } .row:hover .row__copy, .row__copy:focus-visible { opacity: 1; color: var(--accent); } .row--bad .row__v { color: var(--bad); } .row--bad { background: color-mix(in srgb, var(--bad) 4%, transparent); } .tag { font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .3rem; border-radius: 4px; flex: 0 0 auto; } .tag--ok { color: var(--ok); background: var(--ok-soft); } .tag--bad { color: var(--bad); background: var(--bad-soft); } .out__block { margin: 0; padding: .7rem .8rem; max-height: 420px; overflow: auto; font-family: var(--mono); font-size: var(--val-size); line-height: 1.6; font-variant-numeric: tabular-nums slashed-zero; white-space: pre; tab-size: 2; } .out__empty { padding: 1rem; color: var(--muted); font-size: .85rem; } .out__note { padding: .45rem .6rem; font-size: .74rem; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface); } /* galería de códigos */ .codes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: .7rem; } .code-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: .5rem; display: flex; flex-direction: column; gap: .35rem; align-items: center; } .code-card__vis { width: 100%; display: grid; place-items: center; background: #fff; border-radius: 6px; padding: .35rem; min-height: 74px; } .code-card__vis svg, .code-card__vis canvas { max-width: 100%; height: auto; } .code-card__txt { font-family: var(--mono); font-size: .7rem; color: var(--muted); word-break: break-all; text-align: center; } .code-card__dl { display: flex; gap: .25rem; } .code-card__dl button { font-size: .68rem; padding: .2rem .4rem; } .toast-copy { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 1rem); background: var(--ink); color: var(--bg); font-size: .82rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); } .toast-copy.is-on { opacity: 1; transform: translate(-50%, 0); } .privacy-badge { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 26%, transparent); border-radius: var(--r); padding: .55rem .7rem; margin: 1rem 0; } .privacy-badge strong { color: var(--ok); } /* ============================================================= 9. Anuncios (solo huecos, sin código de terceros) ============================================================= */ .ad-slot { display: grid; place-items: center; gap: .2rem; border: 1px dashed var(--border-strong); border-radius: var(--r); background: repeating-linear-gradient(45deg, transparent, transparent 8px, color-mix(in srgb, var(--border) 45%, transparent) 8px, color-mix(in srgb, var(--border) 45%, transparent) 16px); color: var(--muted); margin: 1.4rem 0; text-align: center; } .ad-slot__label { font-size: .68rem; font-weight: 700; letter-spacing: .16em; } .ad-slot__hint { font-size: .64rem; opacity: .75; } .ad-slot--leaderboard { min-height: 100px; } .ad-slot--incontent { min-height: 250px; } .ad-slot--footer { min-height: 100px; } .ad-corner { position: fixed; right: 1rem; bottom: 1rem; z-index: 180; width: min(300px, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .6rem .7rem; display: none; } .ad-corner.is-on { display: block; } .ad-corner__x { position: absolute; top: .25rem; right: .3rem; width: 22px; height: 22px; border-radius: 5px; color: var(--muted); font-size: 1rem; line-height: 1; } .ad-corner__x:hover { background: var(--bg-alt); color: var(--ink); } .ad-corner .ad-slot { margin: 0; min-height: 110px; } /* ============================================================= 10. Secciones de contenido ============================================================= */ .section { padding: clamp(1.6rem, 4vw, 2.6rem) 0; } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); } .section__head { max-width: 70ch; margin-bottom: 1.2rem; } .section__head p { color: var(--muted); margin-top: .4rem; } .steps { display: grid; gap: .9rem; grid-template-columns: 1fr; counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; position: relative; } .step__n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: .82rem; margin-bottom: .5rem; } .step h3 { font-size: .98rem; font-weight: 700; } .step p { font-size: .87rem; color: var(--muted); margin-top: .25rem; } .who { display: grid; gap: .9rem; grid-template-columns: 1fr; } .who__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; } .who__card h3 { font-size: .98rem; font-weight: 700; margin-bottom: .3rem; } .who__card p { font-size: .87rem; color: var(--muted); } .who__card ul { margin: .5rem 0 0 1rem; font-size: .85rem; color: var(--muted); } .who__card li { margin-bottom: .2rem; } .prose { max-width: 72ch; } .prose h3 { margin: 1.4rem 0 .4rem; font-size: 1.05rem; } .prose p, .prose ul, .prose ol { margin-bottom: .8rem; color: var(--ink-2); font-size: .93rem; } .prose ul, .prose ol { margin-left: 1.2rem; } .prose li { margin-bottom: .3rem; } .prose code { font-family: var(--mono); font-size: .85em; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: .05em .3em; } .prose table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-bottom: 1rem; } .prose th, .prose td { border: 1px solid var(--border); padding: .4rem .5rem; text-align: left; } .prose th { background: var(--bg-alt); font-weight: 650; } .table-scroll { overflow-x: auto; } .faq { display: flex; flex-direction: column; gap: .5rem; max-width: 76ch; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .1rem .8rem; } .faq summary { cursor: pointer; font-weight: 650; font-size: .93rem; padding: .7rem 0; list-style: none; display: flex; align-items: center; gap: .5rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: "+"; font-family: var(--mono); color: var(--accent); font-weight: 700; flex: 0 0 auto; width: 14px; } .faq details[open] summary::before { content: "−"; } .faq details > *:not(summary) { font-size: .89rem; color: var(--muted); padding-bottom: .8rem; } .faq details p + p { margin-top: .5rem; } .more-tools { display: grid; gap: .7rem; grid-template-columns: 1fr; } .more-tools a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .7rem .85rem; color: var(--ink); transition: border-color .15s var(--ease-out), transform .15s var(--ease-out); } .more-tools a:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); } .more-tools strong { display: block; font-size: .92rem; } .more-tools span { font-size: .8rem; color: var(--muted); } .noscript-note { background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r); padding: .7rem .8rem; font-size: .88rem; margin: 1rem 0; } /* ============================================================= 11. Pie ============================================================= */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 1.6rem 0 2.4rem; margin-top: 1rem; } .site-footer__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } .site-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; } .site-footer ul { list-style: none; display: flex; flex-direction: column; gap: .3rem; } .site-footer a { color: var(--ink-2); font-size: .86rem; } .site-footer a:hover { color: var(--accent); } .site-footer__legal { margin-top: 1.4rem; font-size: .76rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: .9rem; } /* Las opciones largas de un