{{! Plantilla universal: styles.css }}

:root{--ink:#0b1b17;--muted:#5b6f66;--bg:#f6faf8;--brand:#0a7f4f;--border:#e3eee8;--radius:14px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;color:var(--ink);background:var(--bg);line-height:1.6}
.site{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px}
.brand{font-weight:700;text-decoration:none;color:var(--ink)}
nav a{margin-left:14px;text-decoration:none;color:var(--muted)} nav a:hover{color:var(--ink)}
.hero{max-width:1120px;margin:8px auto 10px;display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center;padding:0 16px}
.hero__text h1{margin:0 0 8px;font-size:clamp(28px,3.6vw,42px)}
.hero__text p{margin:0 0 14px;color:var(--muted)}
.hero__img img{width:100%;height:auto;border-radius:var(--radius)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:.7rem 1rem;border-radius:12px;text-decoration:none;border:1px solid var(--brand);color:var(--bg);background:var(--brand)}
.btn.outline{background:transparent;color:var(--brand)} .btn.small{padding:.5rem .8rem;border-radius:10px}
.toolbar{max-width:1120px;margin:6px auto;padding:0 16px 6px;display:flex;gap:12px;align-items:center}
.search{flex:1;border:1px solid var(--border);border-radius:12px;padding:.7rem 1rem;background:#fff;outline:none}
.count{color:var(--muted);font-size:14px}
.grid{max-width:1120px;margin:8px auto 32px;padding:0 16px;display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card__img{width:100%;height:auto;display:block}
.card__body{padding:14px}
.card__title{margin:0 0 6px;font-size:20px;line-height:1.3}
.card__meta{margin:0 0 10px;color:var(--muted);font-size:13px}
.card__excerpt{margin:0 0 12px;color:var(--ink)}
@media (max-width:960px){.hero{grid-template-columns:1fr}.card{grid-column:span 6}}
@media (max-width:600px){.card{grid-column:span 12}}
.footer{max-width:1120px;margin:0 auto 24px;padding:0 16px;color:var(--muted);font-size:14px}

/* ===== Vista de POST ===== */
:root{ --ink:#0f172a; --muted:#6b7280; --line:#e5e7eb; --brand:#10b981; }
body{ color:var(--ink); background:#fff; }
.site{ max-width:1100px; margin:0 auto; padding:16px; display:flex; justify-content:space-between; align-items:center; }
.site .brand{ font-weight:800; text-decoration:none; }
.site nav a{ color:#2563eb; text-decoration:none; }
.site nav a + a{ margin-left:16px; }

.post{ max-width:820px; margin:24px auto; padding:0 16px; line-height:1.65; }
.post__head h1{ font-size:32px; line-height:1.2; margin:8px 0 6px; }
.post__date{ color:var(--muted); font-size:14px; display:block; margin-bottom:10px; }
.post__excerpt{ color:#111827; font-size:18px; margin:6px 0 16px; }
.post__hero{ width:100%; height:auto; border-radius:14px; display:block; margin:6px 0 14px; }
.post__content p{ margin:12px 0; }
.post__content img{ max-width:100%; height:auto; border-radius:12px; }
.post__content ul{ padding-left:20px; margin:10px 0; }
.post__foot{ margin-top:22px; }
.btn{ display:inline-block; background:var(--brand); color:#fff; padding:10px 14px; border-radius:12px; text-decoration:none; }

@media (max-width:640px){
  .post__head h1{ font-size:26px; }
}

.floating-cta{ position:fixed !important; bottom:16px !important; right:16px !important; z-index:9999; display:block; }
.floating-cta img{ width:96px !important; height:auto !important; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.25); }
@media (max-width:600px){
  .floating-cta{ bottom:12px !important; right:12px !important; }
  .floating-cta img{ width:80px !important; }
}

@keyframes float { 0% { transform: translateY(0);} 50% { transform: translateY(-6px);} 100% { transform: translateY(0);} }
.floating-cta img { animation: float 3s ease-in-out infinite; transition: transform 0.3s ease; }
.floating-cta:hover img { transform: scale(1.05); }

.post__content p{ margin:12px 0; }
.post__content ul{ list-style: disc inside; margin:10px 0 10px 4px; }
.post__content ol{ list-style: decimal inside; margin:10px 0 10px 4px; }
.post__content li{ margin:6px 0; }