/* * skin-libro.css — Variante estética LIBRO / Alto gramaje / Analógico * Concepto: periodismo de calidad vs. vorágine informativa de redes. * No es nostalgia — es posicionamiento. Papel, tinta, rigor editorial, permanencia. * Serif como decisión central. La única skin del set que trabaja con tipografía * de libro real. Diferenciación vs. Editorial (que es sans-serif moderno). * Capa dev de preview reversible. Activar: * NO es producción. Carga después de app.css, tokens.css, improvements.css, * immersive.css, glass.css. Sobreescribe always-on de immersive con !important. * Fecha: 2026-08-02 */ /* ─── Google Fonts: serif editorial ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); /* ─── Tokens locales del skin ─────────────────────────────────────────────── */ html[data-skin="libro"] { /* Paleta papel + tinta */ --sk-paper: #F2EDE3; /* fondo hoja — blanco cálido/hueso, nunca blanco puro */ --sk-paper-2: #EBE5D6; /* superficie levemente más oscura (sidebar, cards) */ --sk-ink: #1A1614; /* casi-negro cálido (tinta tipográfica, nunca #000) */ --sk-ink-muted: #6B5C4A; /* texto secundario / metadatos */ --sk-ink-faint: #9E8E7A; /* placeholders, eyebrow atenuado */ --sk-accent: #7A4F3A; /* siena quemada — color de encuadernación */ --sk-accent-alt: #3D5A4A; /* verde botella — acento alternativo (par/impar) */ --sk-border: rgba(26, 22, 20, .14); --sk-shadow: 0 2px 8px -4px rgba(26, 22, 20, .18); /* Tipografía editorial */ --sk-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sk-font-body: 'Lora', Georgia, 'Times New Roman', serif; --sk-line-height: 1.78; --sk-measure: 68ch; } /* ─── Fondo de página — papel + grano ────────────────────────────────────── */ html[data-skin="libro"] body.homepage { background-color: var(--sk-paper) !important; background-image: none !important; /* cancela gradiente celeste de immersive */ font-family: var(--sk-font-body) !important; line-height: var(--sk-line-height) !important; color: var(--sk-ink) !important; } /* * Grano de papel — pseudo-elemento fijo. * Opacidad 0.14 (vs 0.04 en humanist) — el papel real tiene textura perceptible. * SVG noise de puntos cálidos en el tono del papel para coherencia de paleta. */ html[data-skin="libro"] body.homepage::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } /* ─── Navbar ──────────────────────────────────────────────────────────────── */ html[data-skin="libro"] .site-navbar { background: var(--sk-ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) !important; } html[data-skin="libro"] .site-navbar a, html[data-skin="libro"] .site-navbar .nav-link { font-family: var(--sk-font-body) !important; letter-spacing: .01em !important; } /* ─── Hero / Cover ────────────────────────────────────────────────────────── */ /* * El cover es el "lomo del libro": oscuro, denso, tipografía central. * Gradiente muy sutil — como tinta que pesa más en la parte superior. */ html[data-skin="libro"] .homepage__cover { background: linear-gradient(170deg, #231B17 0%, var(--sk-ink) 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 2px solid var(--sk-accent) !important; } html[data-skin="libro"] .homepage__cover__header h1 { font-family: var(--sk-font-heading) !important; font-weight: 600 !important; font-style: italic !important; letter-spacing: -.01em !important; color: #F5EFE4 !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .35) !important; } html[data-skin="libro"] .homepage__cover__header p, html[data-skin="libro"] .homepage__cover__header .subtitle { font-family: var(--sk-font-body) !important; color: rgba(245, 239, 228, .78) !important; font-size: .95rem !important; } /* ─── Eyebrow ─────────────────────────────────────────────────────────────── */ html[data-skin="libro"] .gl-eyebrow { font-family: var(--sk-font-body) !important; font-size: .72rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: .16em !important; color: var(--sk-accent) !important; } html[data-skin="libro"] .gl-eyebrow::before { background-color: var(--sk-accent) !important; } /* ─── Título "Media profiles" — serif grande, editorial ──────────────────── */ html[data-skin="libro"] .h3-title { font-family: var(--sk-font-heading) !important; font-weight: 700 !important; font-style: italic !important; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem) !important; color: var(--sk-ink) !important; letter-spacing: -.01em !important; line-height: 1.15 !important; } /* ─── Cards ───────────────────────────────────────────────────────────────── */ html[data-skin="libro"] .homepage__main__results .card { background: var(--sk-paper-2) !important; border: 1px solid var(--sk-border) !important; border-radius: 4px !important; /* esquinas casi-rectas — cuaderno, no burbuja */ box-shadow: var(--sk-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform .16s ease, box-shadow .16s ease !important; } html[data-skin="libro"] .homepage__main__results .card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px -6px rgba(26, 22, 20, .22) !important; } html[data-skin="libro"] .card__image { background: linear-gradient(140deg, #E8DDD0, #D9CFC0) !important; } html[data-skin="libro"] .card__title { font-family: var(--sk-font-heading) !important; font-weight: 600 !important; color: var(--sk-ink) !important; letter-spacing: -.005em !important; } html[data-skin="libro"] .card__text, html[data-skin="libro"] .card p { font-family: var(--sk-font-body) !important; color: var(--sk-ink-muted) !important; font-size: .9rem !important; line-height: 1.65 !important; } /* Chips/tags: estilo colofón tipográfico — sin fondo fuerte */ html[data-skin="libro"] .card .chip, html[data-skin="libro"] .card [class*="chip"] { background: rgba(122, 79, 58, .08) !important; color: var(--sk-accent) !important; border: 1px solid rgba(122, 79, 58, .20) !important; border-radius: 3px !important; font-family: var(--sk-font-body) !important; font-size: .72rem !important; letter-spacing: .04em !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ─── Sidebar ─────────────────────────────────────────────────────────────── */ html[data-skin="libro"] .homepage__main__sidebar { background: var(--sk-paper-2) !important; border: 1px solid var(--sk-border) !important; border-radius: 4px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * Sidebar headers: alternancia siena/verde-botella (colores de encuadernación). * Copia el ritmo par/impar de humanist pero con los colores de este skin. */ html[data-skin="libro"] .sidebar__header { background: var(--sk-accent) !important; border-radius: 3px !important; padding: .55rem 1rem !important; margin-bottom: .5rem !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="libro"] .sidebar__header:nth-of-type(even) { background: var(--sk-accent-alt) !important; } html[data-skin="libro"] .sidebar__header h3, html[data-skin="libro"] .sidebar__header * { color: #F5EFE4 !important; font-family: var(--sk-font-heading) !important; font-style: italic !important; } html[data-skin="libro"] .number { color: var(--sk-accent) !important; font-family: var(--sk-font-heading) !important; font-weight: 700 !important; font-size: 1.1em !important; } html[data-skin="libro"] .label { color: var(--sk-ink-muted) !important; font-family: var(--sk-font-body) !important; font-size: .85rem !important; } /* ─── Separadores estilo periodismo impreso ──────────────────────────────── */ html[data-skin="libro"] hr, html[data-skin="libro"] .section-divider { border: none !important; border-top: 1px solid var(--sk-border) !important; margin: 1.5rem 0 !important; } /* Pull quotes (si existen) */ html[data-skin="libro"] blockquote { border-left: 3px solid var(--sk-accent) !important; padding-left: 1.2rem !important; font-family: var(--sk-font-heading) !important; font-style: italic !important; font-size: 1.15em !important; color: var(--sk-ink) !important; margin: 1.5rem 0 !important; } /* ─── Filtros / Búsqueda ──────────────────────────────────────────────────── */ html[data-skin="libro"] .search__box, html[data-skin="libro"] .search-form { background: var(--sk-paper-2) !important; border: 1px solid var(--sk-border) !important; border-radius: 4px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="libro"] .form-control, html[data-skin="libro"] select.filter { background: var(--sk-paper) !important; border: 1px solid var(--sk-border) !important; border-radius: 3px !important; color: var(--sk-ink) !important; font-family: var(--sk-font-body) !important; } html[data-skin="libro"] .form-control:focus, html[data-skin="libro"] select.filter:focus { outline: none !important; border-color: var(--sk-accent) !important; box-shadow: 0 0 0 3px rgba(122, 79, 58, .16) !important; } html[data-skin="libro"] .form-control::placeholder { color: var(--sk-ink-faint) !important; font-style: italic !important; } /* ─── Botones ─────────────────────────────────────────────────────────────── */ html[data-skin="libro"] .btn-blue, html[data-skin="libro"] #apply-filters, html[data-skin="libro"] .btn-advaned-filters { background: var(--sk-accent) !important; border: 1px solid var(--sk-accent) !important; color: #F5EFE4 !important; border-radius: 3px !important; font-family: var(--sk-font-body) !important; letter-spacing: .04em !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html[data-skin="libro"] .btn-blue:hover, html[data-skin="libro"] #apply-filters:hover, html[data-skin="libro"] .btn-advaned-filters:hover { background: #5E3220 !important; border-color: #5E3220 !important; } /* ─── Footer ──────────────────────────────────────────────────────────────── */ /* * Footer: lomo del libro en la parte inferior. * Filigrana SVG sutil en diagonal — como el verjurado del papel. */ html[data-skin="libro"] .site-footer { background: var(--sk-ink) !important; color: #C8BDB0 !important; border-top: 2px solid var(--sk-accent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; font-family: var(--sk-font-body) !important; position: relative !important; } /* Filigrana de papel verjurado en el footer */ html[data-skin="libro"] .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .04; background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .5) 0px, rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 8px ); } html[data-skin="libro"] .site-footer a { color: #C8BDB0 !important; font-family: var(--sk-font-body) !important; } html[data-skin="libro"] .site-footer a:hover { color: #F5EFE4 !important; } /* ─── Imagen empty-state (fondo cálido) ──────────────────────────────────── */ html[data-skin="libro"] .stat__colors, html[data-skin="libro"] .im-hero { background: linear-gradient(145deg, #E2D5C4, #CFC3AF) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ─── Accesibilidad: contraste + reduced motion ──────────────────────────── */ /* Accent AA-safe: contra fondo papel #F2EDE3 → siena #7A4F3A da ratio ~5.5:1 (pasa AA) */ @media (prefers-reduced-motion: reduce) { html[data-skin="libro"] .homepage__main__results .card { transition: none !important; } html[data-skin="libro"] .homepage__main__results .card:hover { transform: none !important; } }