/* ========================================================================= WQuestions — Las preguntas como coordenadas Sistema de diseño editorial-científico · temable vía tokens Identidad: "un color por eje" (Q O L T N K M) = las coordenadas hechas visibles ========================================================================= */ @import "fonts/fonts.css"; /* --------------------------------------------------------------------------- 1. TOKENS (cambia el look del libro entero editando solo este bloque) --------------------------------------------------------------------------- */ :root { /* — Lienzo — */ --papel: #f7f2e8; /* fondo cálido tipo papel */ --papel-2: #fbf7ef; /* superficies elevadas (cajas claras) */ --papel-hund: #efe7d6; /* superficies hundidas */ --tinta: #23201a; /* texto principal, casi negro cálido */ --tinta-suave: #5f574a; /* texto secundario */ --tinta-tenue: #8a8170; /* metadatos, leyendas */ --linea: #e2d8c4; /* bordes suaves */ --linea-fina: #ede5d4; /* hairlines */ /* — Acentos del sistema — */ --acento: #1f6f8b; /* azul petróleo: enlaces, interacción */ --acento-hov: #155063; --acento-2: #c47f17; /* ámbar: marcadores, énfasis */ --acento-2-hov: #a4690f; /* — Un color por eje — */ --eje-q: #b23a48; /* Quién · agente */ --eje-o: #2161a8; /* Qué · objeto */ --eje-l: #3a7d44; /* Dónde · lugar */ --eje-t: #6d4c91; /* Cuándo · tiempo */ --eje-n: #c47f17; /* Cuánto · número */ --eje-k: #0f8a7e; /* Cuál · clase */ --eje-m: #a8327d; /* Cómo · predicado*/ /* tintes suaves de cada eje (fondos de chips/cajas) */ --eje-q-suave: #f6e3e3; --eje-o-suave: #e2ebf6; --eje-l-suave: #e2efe4; --eje-t-suave: #ebe5f3; --eje-n-suave: #f6ecd8; --eje-k-suave: #d9f0ed; --eje-m-suave: #f6e2ef; /* — Código (tema oscuro cálido) — */ --cod-fondo: #221f1a; --cod-sup: #2c281f; --cod-texto: #ece3d1; --cod-tenue: #9a8f78; --cod-coment: #8c8369; --cod-cadena: #d9a441; /* strings */ --cod-clave: #e0808f; /* keywords */ --cod-num: #6fb0d6; /* números */ --cod-func: #7fc4a3; /* funciones/etiquetas */ --cod-puntu: #b7ad97; /* puntuación */ --cod-borde: #3a342a; /* — Tipografía — */ --serif: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; --display: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; --sans: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --txt-base: 1.1875rem; /* ~19px */ --interlinea: 1.68; --medida: 40rem; /* ancho de la columna de texto */ --gutter: 17rem; /* margen derecho para notas y figuras */ /* — Ritmo y formas — */ --esp: 1.6rem; --radio: 4px; --radio-g: 10px; --sombra: 0 1px 2px rgba(40,30,15,.05), 0 8px 24px -12px rgba(40,30,15,.18); --sombra-g: 0 2px 6px rgba(40,30,15,.06), 0 24px 60px -28px rgba(40,30,15,.30); --transicion: .25s cubic-bezier(.22,.61,.36,1); } /* Modo oscuro opcional (atributo en ) */ html[data-tema="oscuro"] { --papel: #1b1813; --papel-2: #232019; --papel-hund: #161310; --tinta: #ece3d1; --tinta-suave: #b7ac96; --tinta-tenue: #8a8170; --linea: #3a342a; --linea-fina: #2c281f; --acento: #6fb6cf; --acento-hov: #95cee2; --eje-q-suave:#3a262a; --eje-o-suave:#23303f; --eje-l-suave:#243524; --eje-t-suave:#2e2740; --eje-n-suave:#3a3018; --eje-k-suave:#163230; --eje-m-suave:#3a2333; } /* --------------------------------------------------------------------------- 2. BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--papel); background-image: radial-gradient(circle at 18% -10%, #fffaf0 0, transparent 45%), radial-gradient(circle at 100% 0%, #f1e8d6 0, transparent 35%); background-attachment: fixed; color: var(--tinta); font-family: var(--serif); font-size: var(--txt-base); line-height: var(--interlinea); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } ::selection { background: #f6e2b8; color: #2a230f; } a { color: var(--acento); text-decoration: none; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--transicion); } a:hover { color: var(--acento-hov); text-decoration: underline; } img, svg { max-width: 100%; height: auto; } hr { border: 0; height: 1px; background: var(--linea); margin: 2.4rem 0; } /* --------------------------------------------------------------------------- 3. CROMO: barra de progreso, cabecera, índice flotante --------------------------------------------------------------------------- */ .barra-progreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--eje-q), var(--eje-n) 40%, var(--eje-k) 70%, var(--eje-m)); transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); transition: transform .1s linear; } .cabecera { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem clamp(1rem, 4vw, 2.5rem); background: color-mix(in srgb, var(--papel) 85%, transparent); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color var(--transicion), background var(--transicion); } .cabecera[data-fija="si"] { border-bottom-color: var(--linea); } .cabecera .marca { font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); display: inline-flex; align-items: center; gap: .55rem; } .cabecera .marca .glifo { display: inline-grid; grid-template-columns: repeat(3, 5px); gap: 2px; } .cabecera .marca .glifo i { width: 5px; height: 5px; border-radius: 1px; opacity: .9; } .cabecera .marca .glifo i:nth-child(1){background:var(--eje-q)} .cabecera .marca .glifo i:nth-child(2){background:var(--eje-o)} .cabecera .marca .glifo i:nth-child(3){background:var(--eje-l)} .cabecera .marca .glifo i:nth-child(4){background:var(--eje-t)} .cabecera .marca .glifo i:nth-child(5){background:var(--eje-n)} .cabecera .marca .glifo i:nth-child(6){background:var(--eje-k)} .cabecera .acciones { display: flex; align-items: center; gap: .4rem; } .btn-cromo { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: var(--tinta-suave); background: transparent; border: 1px solid var(--linea); border-radius: 100px; padding: .35rem .8rem; cursor: pointer; transition: all var(--transicion); display: inline-flex; align-items: center; gap: .4rem; } .btn-cromo:hover { color: var(--tinta); border-color: var(--tinta-tenue); background: var(--papel-2); } /* Índice lateral (drawer) */ .drawer-indice { position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 22rem); z-index: 70; background: var(--papel-2); border-left: 1px solid var(--linea); box-shadow: var(--sombra-g); padding: 1.4rem 1.2rem; overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); } .drawer-indice[data-abierto="si"] { transform: translateX(0); } .drawer-indice h2 { font-family: var(--sans); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-tenue); margin: .2rem 0 1rem; } .drawer-indice ol { list-style: none; margin: 0; padding: 0; counter-reset: di; } .drawer-indice a { display: block; padding: .3rem .2rem; font-size: .95rem; color: var(--tinta-suave); border-bottom: 1px solid var(--linea-fina); } .drawer-indice a.activo { color: var(--acento); font-weight: 600; } .velo { position: fixed; inset: 0; z-index: 65; background: rgba(30,24,12,.28); opacity: 0; pointer-events: none; transition: opacity .3s; } .velo[data-abierto="si"] { opacity: 1; pointer-events: auto; } /* --------------------------------------------------------------------------- 4. ESTRUCTURA DEL CAPÍTULO --------------------------------------------------------------------------- */ .libro { display: block; } .capitulo { max-width: 72rem; margin-inline: auto; padding: 0 clamp(1.1rem, 5vw, 3rem) 5rem; } /* Portada de capítulo */ .portada-cap { padding: clamp(2.5rem, 7vw, 5rem) 0 2.2rem; border-bottom: 1px solid var(--linea); margin-bottom: 2.6rem; } .portada-cap .parte { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acento-2); display: flex; align-items: center; gap: .7rem; } .portada-cap .parte::before { content: ""; width: 1.8rem; height: 2px; background: var(--acento-2); display: inline-block; } .portada-cap .num-cap { font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 12vw, 6rem); line-height: .9; color: var(--linea); margin: 1.2rem 0 .2rem; letter-spacing: -.02em; -webkit-text-stroke: 1px var(--tinta-tenue); color: transparent; } .portada-cap h1 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2.1rem, 6.5vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; margin: .2rem 0 0; max-width: 22ch; color: var(--tinta); } .portada-cap .lede { font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.5; color: var(--tinta-suave); margin: 1.4rem 0 0; max-width: 46ch; font-style: italic; } /* Columna de contenido con margen derecho para notas/figuras */ .contenido { max-width: var(--medida); } .contenido > * { margin-left: 0; margin-right: 0; } /* --------------------------------------------------------------------------- 5. TIPOGRAFÍA DE TEXTO --------------------------------------------------------------------------- */ .contenido h2 { font-family: var(--display); font-weight: 600; font-optical-sizing: auto; font-size: clamp(1.6rem, 4vw, 2.05rem); line-height: 1.12; letter-spacing: -.015em; margin: 3.4rem 0 1rem; color: var(--tinta); scroll-margin-top: 4.5rem; position: relative; } .contenido h2 .marcador { font-family: var(--sans); font-weight: 700; font-size: .7rem; color: var(--acento); letter-spacing: .12em; display: block; margin-bottom: .5rem; text-transform: uppercase; } .contenido h3 { font-family: var(--display); font-weight: 600; font-size: 1.32rem; line-height: 1.2; margin: 2.4rem 0 .7rem; color: var(--tinta); scroll-margin-top: 4.5rem; } .contenido h4 { font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .04em; margin: 1.8rem 0 .5rem; color: var(--tinta-suave); text-transform: uppercase; } .contenido p { margin: 0 0 1.15rem; hanging-punctuation: first; } .contenido p + p { text-indent: 0; } /* Capitular (drop cap) en el primer párrafo del cuerpo */ .contenido > .entrada:first-of-type::first-letter, p.capitular::first-letter { font-family: var(--display); font-weight: 700; float: left; font-size: 4.2em; line-height: .76; padding: .05em .12em 0 0; color: var(--eje-q); } .contenido strong, .contenido b { font-weight: 600; } .contenido em, .contenido i { font-style: italic; } .contenido ul, .contenido ol { margin: 0 0 1.2rem; padding-left: 1.4rem; } .contenido li { margin: .35rem 0; } .contenido li::marker { color: var(--acento-2); } .contenido ul.limpia { list-style: none; padding-left: 0; } blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 3px solid var(--acento-2); color: var(--tinta-suave); font-style: italic; } blockquote p:last-child { margin-bottom: 0; } /* Cita destacada / pull quote */ .cita-destacada { font-family: var(--display); font-weight: 500; font-style: italic; font-size: clamp(1.4rem, 3.2vw, 1.9rem); line-height: 1.28; letter-spacing: -.01em; color: var(--tinta); margin: 2.6rem 0; padding: 0; max-width: 30ch; position: relative; border: 0; } .cita-destacada::before { content: "\201C"; font-family: var(--display); font-size: 3.2em; line-height: 0; color: var(--acento-2); position: absolute; left: -.55em; top: .55em; opacity: .55; } .cita-destacada cite { display: block; font-family: var(--sans); font-style: normal; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue); margin-top: .9rem; } /* --------------------------------------------------------------------------- 6. NOTAS AL MARGEN --------------------------------------------------------------------------- */ .nota-margen { float: right; clear: right; width: var(--gutter); margin: .3rem calc(-1 * var(--gutter) - 2.2rem) 1.2rem 0; font-family: var(--sans); font-size: .82rem; line-height: 1.5; color: var(--tinta-suave); border-top: 2px solid var(--linea); padding-top: .5rem; } .nota-margen .etq { display: block; font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); margin-bottom: .25rem; } .nota-margen code { font-size: .82em; } /* Retrato del autor */ .retrato-autor { float: right; clear: right; width: clamp(150px, 34%, 230px); margin: .35rem 0 1.1rem 1.6rem; } .retrato-autor img { display: block; width: 100%; height: auto; border-radius: var(--radio-g); border: 1px solid var(--linea); box-shadow: var(--sombra-g); filter: saturate(.92); } .retrato-autor figcaption { margin-top: .55rem; font-family: var(--sans); font-size: .74rem; line-height: 1.4; letter-spacing: .02em; color: var(--tinta-tenue); text-align: center; } @media (max-width: 620px) { .retrato-autor { float: none; width: min(230px, 70%); margin: .5rem auto 1.6rem; } } /* Marcador de referencia en el texto: (N) enlazado a referencias.html */ .ref { font-size: .72em; font-weight: 700; vertical-align: super; line-height: 0; color: var(--acento); text-decoration: none; white-space: nowrap; padding: 0 .04em; letter-spacing: -.01em; } .ref:hover, .ref:focus { color: var(--acento-hov); text-decoration: underline; } /* Página de referencias (aparato crítico) */ .lista-refs { margin: 1.4rem 0 0; } .lista-refs h2 { font-size: 1.04rem; letter-spacing: .01em; margin: 2.1rem 0 .7rem; } .lista-refs h2:first-of-type { margin-top: .6rem; } .ref-item { position: relative; padding: .55rem 0 .55rem 2.7rem; border-top: 1px solid var(--linea-fina); font-size: .96rem; line-height: 1.55; color: var(--tinta-suave); scroll-margin-top: 5rem; } .ref-item:target { background: color-mix(in srgb, var(--acento) 9%, transparent); border-radius: var(--radio); } .ref-item .ref-n { position: absolute; left: 0; top: .55rem; width: 2.1rem; text-align: right; font-family: var(--sans); font-weight: 700; font-size: .82rem; color: var(--acento); } .ref-item strong, .ref-item em { color: var(--tinta); } .ref-item a { word-break: break-word; } /* --------------------------------------------------------------------------- 7. CAJAS (callouts) --------------------------------------------------------------------------- */ .caja { margin: 2rem 0; padding: 1.2rem 1.3rem 1.25rem; border-radius: var(--radio-g); background: var(--papel-2); border: 1px solid var(--linea); box-shadow: var(--sombra); position: relative; } .caja > :last-child { margin-bottom: 0; } .caja .caja-tit { font-family: var(--sans); font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; } .caja .caja-tit .ico { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } /* Decisión de diseño (D1..D9) */ .caja--decision { border-left: 4px solid var(--eje-o); background: var(--eje-o-suave); } .caja--decision .caja-tit { color: var(--eje-o); } .caja--decision .codigo-d { font-family: var(--mono); font-weight: 700; background: var(--eje-o); color: #fff; border-radius: 4px; padding: .05rem .45rem; font-size: .8rem; letter-spacing: 0; } /* Idea clave */ .caja--idea { border-left: 4px solid var(--acento-2); background: var(--eje-n-suave); } .caja--idea .caja-tit { color: var(--acento-2-hov); } /* En la práctica */ .caja--practica { border-left: 4px solid var(--eje-l); background: var(--eje-l-suave); } .caja--practica .caja-tit { color: var(--eje-l); } /* Alerta / trampa */ .caja--alerta { border-left: 4px solid var(--eje-q); background: var(--eje-q-suave); } .caja--alerta .caja-tit { color: var(--eje-q); } /* Precedente / referencia académica */ .caja--precedente { border-left: 4px solid var(--eje-t); background: var(--eje-t-suave); } .caja--precedente .caja-tit { color: var(--eje-t); } /* Definición de término */ .caja--definicion { border-left: 4px solid var(--eje-k); background: var(--eje-k-suave); } .caja--definicion .caja-tit { color: var(--eje-k); } /* --------------------------------------------------------------------------- 8. EJES Y TRIPLETAS (la identidad visual del libro) --------------------------------------------------------------------------- */ .eje { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: .82em; width: 1.5em; height: 1.5em; border-radius: 5px; color: #fff; vertical-align: middle; line-height: 1; } .eje--q{background:var(--eje-q)} .eje--o{background:var(--eje-o)} .eje--l{background:var(--eje-l)} .eje--t{background:var(--eje-t)} .eje--n{background:var(--eje-n)} .eje--k{background:var(--eje-k)} .eje--m{background:var(--eje-m)} /* etiqueta eje + palabra: "Q quién" */ .eje-rotulo { display: inline-flex; align-items: baseline; gap: .4em; font-family: var(--sans); font-size: .9em; font-weight: 500; } /* Tripleta sujeto–predicado–objeto */ .triple { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .9rem; margin: 1.1rem 0; } .triple .nodo { padding: .28rem .6rem; border-radius: 6px; font-weight: 500; border: 1.5px solid currentColor; background: var(--papel-2); } .triple .nodo small { font-family: var(--sans); font-weight: 700; font-size: .7em; opacity: .7; margin-left: .35em; letter-spacing: .03em; } .nodo--q{color:var(--eje-q)} .nodo--o{color:var(--eje-o)} .nodo--l{color:var(--eje-l)} .nodo--t{color:var(--eje-t)} .nodo--n{color:var(--eje-n)} .nodo--k{color:var(--eje-k)} .triple .nodo span { color: var(--tinta); } .triple .enlace { display: inline-flex; flex-direction: column; align-items: center; color: var(--eje-m); font-weight: 600; font-size: .82rem; position: relative; padding: 0 .2rem; } .triple .enlace::before { content: "→"; font-size: 1.1rem; line-height: 1; } .triple .enlace .firma { font-family: var(--sans); font-size: .62rem; color: var(--tinta-tenue); font-weight: 600; letter-spacing: .02em; } /* --------------------------------------------------------------------------- 9. CÓDIGO --------------------------------------------------------------------------- */ code, kbd, samp { font-family: var(--mono); font-size: .88em; } :not(pre) > code { background: var(--papel-hund); border: 1px solid var(--linea-fina); border-radius: 4px; padding: .08em .38em; color: #6a4a12; font-size: .84em; } html[data-tema="oscuro"] :not(pre) > code { color: var(--cod-cadena); } .bloque-codigo { margin: 1.8rem 0; border-radius: var(--radio-g); overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--cod-borde); } .bloque-codigo .barra { display: flex; align-items: center; justify-content: space-between; background: var(--cod-sup); color: var(--cod-tenue); font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .9rem; border-bottom: 1px solid var(--cod-borde); } .bloque-codigo .barra .lenguaje { color: var(--cod-cadena); } .bloque-codigo .barra .copiar { background: transparent; border: 0; color: var(--cod-tenue); cursor: pointer; font-family: var(--sans); font-size: .72rem; display: inline-flex; gap: .35rem; align-items: center; transition: color var(--transicion); } .bloque-codigo .barra .copiar:hover { color: var(--cod-texto); } .bloque-codigo pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; background: var(--cod-fondo); color: var(--cod-texto); font-size: .85rem; line-height: 1.6; tab-size: 2; } pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; } /* tokens del resaltador */ .tk-coment { color: var(--cod-coment); font-style: italic; } .tk-cadena { color: var(--cod-cadena); } .tk-clave { color: var(--cod-clave); } .tk-num { color: var(--cod-num); } .tk-func { color: var(--cod-func); } .tk-puntu { color: var(--cod-puntu); } .tk-q{color:#e88a95} .tk-o{color:#7fb0e6} .tk-l{color:#8fce99} .tk-t{color:#c2a8e8} .tk-n{color:#e6b65f} .tk-k{color:#62c9bd} .tk-m{color:#e08abf} /* --------------------------------------------------------------------------- 10. FIGURAS, SVG, CHARTS --------------------------------------------------------------------------- */ .figura { margin: 2.2rem 0; } .figura figcaption { font-family: var(--sans); font-size: .82rem; line-height: 1.5; color: var(--tinta-suave); margin-top: .7rem; padding-left: .9rem; border-left: 2px solid var(--acento-2); } .figura figcaption b, .figura figcaption .fnum { color: var(--acento-2-hov); font-weight: 700; font-feature-settings: "tnum"; } .figura .lienzo { background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 1.4rem; box-shadow: var(--sombra); } /* Figura ancha: ocupa columna + margen */ .figura--ancha { width: calc(var(--medida) + var(--gutter) + 2.2rem); max-width: 100%; } .figura--margen { float: right; clear: right; width: var(--gutter); margin: .3rem calc(-1 * var(--gutter) - 2.2rem) 1.2rem 1rem; } .figura--margen .lienzo { padding: .8rem; } .figura--margen figcaption { font-size: .76rem; } .svg-eje text { font-family: var(--sans); } .chart text { font-family: var(--sans); } .chart .tooltip { pointer-events: none; } .tip-flotante { position: fixed; z-index: 80; background: var(--cod-fondo); color: var(--cod-texto); font-family: var(--sans); font-size: .78rem; padding: .4rem .6rem; border-radius: 6px; box-shadow: var(--sombra-g); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; max-width: 16rem; line-height: 1.4; } .tip-flotante[data-visible="si"] { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------------------------- 11. TABLAS --------------------------------------------------------------------------- */ .tabla-envoltura { margin: 1.8rem 0; overflow-x: auto; border-radius: var(--radio-g); border: 1px solid var(--linea); box-shadow: var(--sombra); } table { border-collapse: collapse; width: 100%; font-size: .92rem; background: var(--papel-2); } caption { caption-side: top; text-align: left; font-family: var(--sans); font-size: .82rem; color: var(--tinta-suave); padding: .6rem .9rem; } th, td { padding: .6rem .9rem; text-align: left; border-bottom: 1px solid var(--linea-fina); vertical-align: top; } thead th { font-family: var(--sans); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); background: var(--papel-hund); border-bottom: 2px solid var(--linea); } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: color-mix(in srgb, var(--acento-2) 7%, transparent); } td code { white-space: nowrap; } /* --------------------------------------------------------------------------- 12. DOS COLUMNAS --------------------------------------------------------------------------- */ .columnas { column-count: 2; column-gap: 2.2rem; column-rule: 1px solid var(--linea-fina); } .columnas p { margin-top: 0; } .columnas > :first-child { margin-top: 0; } @media (max-width: 720px) { .columnas { column-count: 1; } } /* Rejilla genérica para comparaciones lado a lado */ .rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 1.8rem 0; } .rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0; } @media (max-width: 720px) { .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; } } /* Tarjeta */ .tarjeta { background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 1.1rem 1.15rem; box-shadow: var(--sombra); } .tarjeta h4 { margin-top: 0; } .tarjeta .emoji { font-size: 1.5rem; line-height: 1; } /* Bloque de audios (resúmenes) */ .audios { margin: 0 0 1.4rem; max-width: 46rem; background: var(--papel-2); border: 1px solid var(--linea); border-left: 4px solid var(--acento); border-radius: var(--radio-g); padding: 1rem 1.2rem 1.1rem; box-shadow: var(--sombra); } .audios-tit { font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; } .audios .pista { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .55rem 0; } .audios .pista + .pista { border-top: 1px solid var(--linea-fina); } .audios .pista-et { font-family: var(--sans); font-weight: 600; font-size: .98rem; color: var(--tinta); min-width: 11rem; display: inline-flex; align-items: center; gap: .5rem; } .audios .pista-et .pt { width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; } .audios audio { flex: 1; min-width: 15rem; height: 40px; } @media print { .audios { display: none; } } /* --------------------------------------------------------------------------- 13. NAVEGACIÓN ENTRE CAPÍTULOS --------------------------------------------------------------------------- */ .nav-cap { max-width: 72rem; margin: 3rem auto 0; padding: 2rem clamp(1.1rem,5vw,3rem) 0; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 1rem; } .nav-cap a { display: flex; flex-direction: column; gap: .2rem; max-width: 46%; font-family: var(--sans); padding: .8rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio-g); background: var(--papel-2); transition: all var(--transicion); } .nav-cap a:hover { border-color: var(--acento); text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra); } .nav-cap a.sig { margin-left: auto; text-align: right; } .nav-cap .dir { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-tenue); } .nav-cap .tit { font-size: .98rem; color: var(--tinta); font-weight: 500; font-family: var(--serif); } /* --------------------------------------------------------------------------- 14. PORTADA / ÍNDICE (index.html) --------------------------------------------------------------------------- */ .heroe { max-width: 72rem; margin: 0 auto; padding: clamp(3rem,9vw,7rem) clamp(1.1rem,5vw,3rem) 2rem; position: relative; } .heroe .super { font-family: var(--sans); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; color: var(--acento-2); } .heroe h1 { font-family: var(--display); font-weight: 600; font-optical-sizing: auto; font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: 1; letter-spacing: -.025em; margin: 1rem 0 .4rem; max-width: 16ch; } .heroe h1 em { font-style: italic; color: var(--eje-q); } .heroe .bajada { font-size: clamp(1.15rem,2.6vw,1.5rem); color: var(--tinta-suave); max-width: 48ch; line-height: 1.5; margin: 1rem 0 0; } .heroe .autor { font-family: var(--sans); margin-top: 1.6rem; color: var(--tinta-suave); font-size: .95rem; } /* franja de los siete ejes */ .franja-ejes { display: flex; gap: .5rem; flex-wrap: wrap; margin: 2rem 0; } .franja-ejes .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 100px; font-family: var(--sans); font-size: .82rem; font-weight: 500; border: 1px solid var(--linea); background: var(--papel-2); } .franja-ejes .pt { width: .7rem; height: .7rem; border-radius: 50%; } .toc { max-width: 72rem; margin: 0 auto; padding: 1rem clamp(1.1rem,5vw,3rem) 5rem; } .toc .parte-bloque { margin: 2.6rem 0 0; } .toc .parte-tit { font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-2); display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; } .toc .parte-tit::after { content:""; flex:1; height:1px; background: var(--linea); } .toc ol { list-style: none; margin: 0; padding: 0; } .toc .cap-item a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; gap: 1rem; padding: .8rem .6rem; border-radius: var(--radio); border-bottom: 1px solid var(--linea-fina); transition: background var(--transicion); } .toc .cap-item a:hover { background: var(--papel-2); text-decoration: none; } .toc .cap-item .n { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--tinta-tenue); } .toc .cap-item .t { font-family: var(--serif); font-size: 1.1rem; color: var(--tinta); } .toc .cap-item .d { font-family: var(--sans); font-size: .82rem; color: var(--tinta-tenue); max-width: 38ch; } @media (max-width:640px){ .toc .cap-item a{ grid-template-columns: 2.2rem 1fr; } .toc .cap-item .d{ display:none; } } /* --------------------------------------------------------------------------- 15. ANIMACIÓN DE ENTRADA --------------------------------------------------------------------------- */ /* Visible por defecto; solo se oculta para animar si hay JS (html.js). Así imprime bien y funciona sin JavaScript. */ html.js .revelar { opacity: 0; transform: translateY(14px); } html.js .revelar.visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { html.js .revelar { opacity: 1 !important; transform: none !important; } } .portada-cap .parte, .portada-cap .num-cap, .portada-cap h1, .portada-cap .lede { animation: subir .7s both; } .portada-cap .num-cap { animation-delay: .05s; } .portada-cap h1 { animation-delay: .12s; } .portada-cap .lede { animation-delay: .2s; } @keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 16. RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 1100px) { :root { --gutter: 0rem; } .contenido { max-width: 42rem; margin-inline: auto; } .nota-margen, .figura--margen { float: none; width: auto; margin: 1.4rem 0; background: var(--papel-2); border: 1px solid var(--linea); border-top-width: 1px; border-left: 3px solid var(--acento); border-radius: var(--radio-g); padding: .9rem 1rem; } .figura--ancha { width: 100%; } } @media (max-width: 600px) { :root { --txt-base: 1.075rem; } .triple { font-size: .8rem; } } /* --------------------------------------------------------------------------- 17. IMPRESIÓN --------------------------------------------------------------------------- */ @media print { :root { --papel:#fff; --papel-2:#fff; --tinta:#000; } body { background: #fff; font-size: 11pt; } .cabecera, .barra-progreso, .drawer-indice, .velo, .nav-cap, .btn-cromo, .bloque-codigo .copiar { display: none !important; } .bloque-codigo { box-shadow: none; } .bloque-codigo pre { background: #f4f1ea; color: #1a1a1a; } .tk-coment,.tk-cadena,.tk-clave,.tk-num,.tk-func,.tk-puntu { color: #333 !important; } .caja, .figura .lienzo, .tarjeta { box-shadow: none; break-inside: avoid; } .figura, .caja, blockquote, .triple, table { break-inside: avoid; } h2, h3 { break-after: avoid; } .nota-margen { float: none; width: auto; margin: 1rem 0; } a { color: #000; text-decoration: underline; } .capitulo { max-width: none; } html.js .revelar { opacity: 1 !important; transform: none !important; } @page { size: A4; margin: 15mm 14mm 17mm; } .contenido { max-width: none; } .figura--ancha { width: auto; max-width: 100%; } .figura--margen { float: none; width: auto; margin: 1.2rem 0; } .columnas { column-count: 1; } .portada-cap { break-after: avoid; padding-top: 0; } .bloque-codigo pre { white-space: pre-wrap; word-break: break-word; } }