/*
Theme Name: Te cuento lo que no cuento
Description: Tema editorial de libros a dos columnas.
Version: 1.0.0
Text Domain: tcnc
*/

:root { --ink:#1b1b1f; --muted:#5d5d66; --paper:#faf7f2; --line:#e4ddd0; --accent:#7a1f2b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.65 Georgia,"Times New Roman",serif; }
a { color:var(--accent); }
.wrap { max-width:1000px; margin:0 auto; padding:0 20px; }

.site-header { border-bottom:1px solid var(--line); padding:44px 0 28px; text-align:center; }
.site-title { margin:0; font-size:clamp(28px,5vw,46px); letter-spacing:.02em; }
.site-title a { color:var(--ink); text-decoration:none; }
.site-desc { margin:8px 0 0; color:var(--muted); font-style:italic; }
.site-nav { margin-top:20px; font:14px/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.site-nav a { color:var(--ink); text-decoration:none; margin:0 12px; }
.site-nav a:hover { color:var(--accent); }

.books { display:grid; grid-template-columns:repeat(2,1fr); gap:40px 32px; padding:48px 0; }
.book { display:flex; flex-direction:column; }
.book-cover { background:#ece6da; aspect-ratio:2/3; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.book-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.book-title { margin:20px 0 8px; font-size:24px; line-height:1.25; }
.book-desc { margin:0; color:var(--muted); font-size:16px; }
.book-buy { align-self:flex-start; margin-top:16px; padding:10px 22px; background:var(--accent); color:#fff; text-decoration:none; font:14px system-ui,sans-serif; }
.book-buy:hover { opacity:.88; }
@media (max-width:560px) { .books { grid-template-columns:1fr; } }

.page-content { padding:48px 0; max-width:720px; margin:0 auto; }
.page-content h1 { font-size:36px; }
.cf label { display:block; margin:16px 0 4px; font:14px system-ui,sans-serif; }
.cf input, .cf textarea { width:100%; padding:10px; border:1px solid var(--line); background:#fff; font:inherit; }
.cf button { margin-top:20px; padding:12px 28px; background:var(--accent); color:#fff; border:0; font:15px system-ui,sans-serif; cursor:pointer; }
.cf .hp { position:absolute; left:-9999px; }
.notice { padding:12px 16px; background:#eef6ee; border:1px solid #bcd9bc; font:15px system-ui,sans-serif; }

.site-footer { border-top:1px solid var(--line); padding:28px 0; text-align:center; color:var(--muted); font:14px system-ui,sans-serif; }
.site-footer a { color:var(--muted); margin:0 10px; }