/* POSITIVA · Soporte * * Hoja única para el índice y los ~50 artículos. Los tokens --pv-* son los * mismos del resto de la web (la landing no tiene build que los comparta, así * que se copian a mano; si cambian allí, cambian aquí). * * Tres decisiones de fondo, para que nadie las deshaga sin querer: * * 1. El índice NO es una rejilla de tarjetas. Cincuenta tarjetas idénticas son * cincuenta decisiones con el mismo peso. Es un índice ordenado: secciones * numeradas (como las de la portada) y filas separadas por filete, más * cerca del índice de un libro que del panel de ayuda de nadie. * 2. Las dos vías de entrada usan la regla de color del producto: el fotógrafo * trabaja sobre --pv-papel (el panel) y quien revisa, sobre --pv-sala (el * cuarto oscuro). El color significa algo, no decora. * 3. Sin animaciones de aparición al bajar. Quien llega al soporte tiene un * problema; no se le hace esperar a que el contenido se desvanezca dentro. */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/playfair.woff2) format('woff2')} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:300 400;font-display:swap;src:url(/fonts/playfair-italic.woff2) format('woff2')} @font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/ibmplexmono-400.woff2) format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/spacemono-700.woff2) format('woff2')} :root{ --pv-papel:#F1F0EC; --pv-luz:#FFFFFF; --pv-bandeja:#E6E5E0; --pv-sala:#0E0E0D; --pv-sala-2:#1A1A18; --pv-tinta:#171614; --pv-tinta-60:#6E6D67; --pv-tinta-30:#A9A8A2; --pv-linea:#D6D5CF; --pv-linea-sala:#2A2A27; --pv-ambar:#C98A2B; --pv-ambar-luz:#F5E9D2; --pv-ambar-hover:#B37A24; --pv-graso:#E0402A; --pv-display:'Playfair Display',Georgia,serif; --pv-sans:'Instrument Sans',-apple-system,system-ui,sans-serif; --pv-mono:'IBM Plex Mono',ui-monospace,monospace; --pv-r-panel:10px; --pv-r-input:8px; --pv-r-pill:999px; --pv-s1:4px;--pv-s2:8px;--pv-s3:12px;--pv-s4:16px;--pv-s5:24px;--pv-s6:32px;--pv-s7:48px;--pv-s8:64px; --pv-ease:cubic-bezier(.4,0,.2,1); --barra:96px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:var(--barra)} body{background:var(--pv-papel);color:var(--pv-tinta);font-family:var(--pv-sans);font-size:18px;line-height:1.67;-webkit-font-smoothing:antialiased;overflow-x:clip} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mono{font-family:var(--pv-mono);font-size:12px} .saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pv-ambar);color:#fff;padding:12px 20px;border-radius:0 0 var(--pv-r-panel) 0} .saltar:focus{left:0} ::selection{background:var(--pv-ambar-luz);color:var(--pv-tinta)} h1,h2,h3{font-family:var(--pv-display);font-weight:300;letter-spacing:-.02em;line-height:1.06} h1{font-size:clamp(36px,4.6vw,62px)} h1 em,h2 em{font-style:italic} .lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--pv-tinta-60);max-width:62ch} /* Rótulo de sección con su número y el filete que lo cierra: el mismo device que numera las secciones de la portada. */ .eyebrow{ font-family:var(--pv-mono);font-size:11px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--pv-ambar); display:flex;align-items:center;gap:var(--pv-s4);margin-bottom:var(--pv-s4); } .eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.28} .eyebrow .idx{color:var(--pv-tinta-30)} .dark .eyebrow .idx{color:#5C5B56} /* ── Cromo común ───────────────────────────────────────────────────────── * La cabecera y el pie los aportan partials/chrome-nav.html y * chrome-footer.html, que traen su propio CSS. Aquí solo queda lo que esos * parciales NO definen y lo que hace falta para convivir con ellos. * * El parcial estiliza la cabecera con el selector de elemento "nav", y el * soporte tiene además migas de pan, sumarios y raíles que también son