/* ══════════════════════════════════════════
   CRONICANDO — Estilos globales
   ══════════════════════════════════════════ */

:root {
  --cream:   #FAF7F2;
  --ink:     #1A1814;
  --warm:    #E8E0D4;
  --accent:  #D4432A;
  --accent2: #F0A500;
  --muted:   #8A8278;
  --card:    #FFFFFF;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── HEADER ─────────────────────────────── */
header {
  background: var(--ink);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--accent);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 0;
  text-decoration: none;
}

.logo-icon { width:42px; height:42px; flex-shrink:0; }

.logo-text { display:flex; flex-direction:column; line-height:1; }

.logo-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #FAF7F2;
  letter-spacing: -.02em;
}

.logo-tagline {
  font-size: .62rem;
  color: var(--accent2);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 2px;
}

nav { display:flex; gap:2rem; align-items:center; }

nav a {
  color: var(--warm);
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: .05em;
  transition: color .2s;
}

nav a:hover { color: var(--accent2); }

.btn-submit {
  background: var(--accent) !important;
  color: white !important;
  padding: .5rem 1.2rem;
  border-radius: 2px;
  font-weight: 500;
  font-size: .82rem !important;
  letter-spacing: .08em;
}

.btn-submit:hover { background: #b8321e !important; }

/* ── TICKER ──────────────────────────────── */
.ticker {
  background: var(--accent2);
  color: var(--ink);
  padding: .55rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-inner {
  display: inline-block;
  animation: ticker 28s linear infinite;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── HERO ────────────────────────────────── */
.hero {
  background: var(--ink);
  color: var(--cream);
  padding: 5rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(212,67,42,.15) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(240,165,0,.1) 0%, transparent 50%);
  pointer-events:none;
}

.hero-eyebrow {
  font-size:.72rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--accent2);
  margin-bottom:1rem;
  position:relative;
}

.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,5.5vw,4rem);
  font-weight:700;
  line-height:1.1;
  position:relative;
  max-width:700px;
  margin:0 auto 1.5rem;
}

.hero h1 em { font-style:italic; color:var(--accent); }

.hero p {
  font-size:1rem;
  color:#B8B0A6;
  max-width:460px;
  margin:0 auto 2.5rem;
  position:relative;
}

.hero-cta {
  display:inline-flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  position:relative;
}

/* ── BUTTONS ─────────────────────────────── */
.btn-primary {
  background:var(--accent);
  color:white;
  padding:.85rem 2rem;
  text-decoration:none;
  font-weight:500;
  font-size:.9rem;
  letter-spacing:.05em;
  border-radius:2px;
  border:none;
  cursor:pointer;
  transition:transform .15s,background .2s;
  font-family:'DM Sans',sans-serif;
}

.btn-primary:hover { transform:translateY(-2px); background:#b8321e; }

.btn-ghost {
  border:1px solid rgba(255,255,255,.25);
  color:var(--cream);
  padding:.85rem 2rem;
  text-decoration:none;
  font-size:.9rem;
  border-radius:2px;
  transition:border-color .2s,color .2s;
}

.btn-ghost:hover { border-color:var(--accent2); color:var(--accent2); }

.btn-accent {
  display:block;
  background:var(--accent2);
  color:var(--ink);
  padding:.75rem;
  text-decoration:none;
  font-weight:500;
  font-size:.85rem;
  border-radius:2px;
  letter-spacing:.05em;
  text-align:center;
  transition:opacity .2s;
}

.btn-accent:hover { opacity:.85; }

.btn-loadmore {
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:.7rem 2rem;
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.06em;
  cursor:pointer;
  border-radius:2px;
  text-decoration:none;
  display:inline-block;
  transition:background .2s,color .2s;
}

.btn-loadmore:hover { background:var(--ink); color:var(--cream); }

/* ── MAIN LAYOUT ─────────────────────────── */
.main-wrap {
  max-width:1100px;
  margin:0 auto;
  padding:3.5rem 2rem;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:3rem;
}

.section-label {
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.5rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.section-label::after { content:''; flex:1; height:1px; background:var(--warm); }

/* ── FEATURED CARD ───────────────────────── */
.featured-card {
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--ink);
  color:var(--cream) !important;
  padding:2.5rem;
  border-radius:4px;
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
  transition:transform .2s;
}

.featured-card:hover { transform:translateY(-3px); }

.featured-card::before {
  content:'';
  position:absolute;
  top:0; left:0;
  width:4px; height:100%;
  background:var(--accent);
}

.featured-badge {
  display:inline-block;
  background:var(--accent);
  color:white;
  font-size:.62rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:.25rem .6rem;
  border-radius:2px;
  margin-bottom:1rem;
}

.featured-card h2 {
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  font-weight:700;
  line-height:1.25;
  margin-bottom:1rem;
}

.featured-card p {
  color:#A8A09A;
  font-size:.93rem;
  line-height:1.7;
  margin-bottom:1.5rem;
}

.card-meta { display:flex; align-items:center; gap:1rem; font-size:.75rem; color:var(--muted); }

.card-category {
  background:rgba(255,255,255,.08);
  padding:.2rem .6rem;
  border-radius:2px;
  color:var(--accent2);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
}

/* ── STORIES GRID ────────────────────────── */
.stories-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-bottom:2rem;
}

.story-card {
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--card);
  border:1px solid var(--warm);
  border-radius:4px;
  padding:1.5rem;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}

.story-card:hover {
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.07);
}

.story-number {
  font-size:.62rem;
  color:var(--accent);
  letter-spacing:.15em;
  font-weight:500;
  text-transform:uppercase;
  margin-bottom:.5rem;
}

.story-card h3 {
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.3;
  margin-bottom:.6rem;
  color:var(--ink);
}

.story-card p {
  font-size:.83rem;
  color:var(--muted);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.story-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1rem;
  padding-top:.75rem;
  border-top:1px solid var(--warm);
  font-size:.72rem;
  color:var(--muted);
}

.reactions { display:flex; gap:.5rem; }

.reaction {
  display:flex;
  align-items:center;
  gap:.2rem;
  background:var(--cream);
  padding:.15rem .4rem;
  border-radius:10px;
  font-size:.75rem;
}

/* ── PAGINATION ──────────────────────────── */
.pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:2rem;
  font-size:.85rem;
  color:var(--muted);
}

.btn-page {
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:.5rem 1.2rem;
  font-family:'DM Sans',sans-serif;
  font-size:.82rem;
  font-weight:500;
  cursor:pointer;
  border-radius:2px;
  text-decoration:none;
  transition:background .2s,color .2s;
}

.btn-page:hover { background:var(--ink); color:var(--cream); }

/* ── SIDEBAR ─────────────────────────────── */
.sidebar-widget {
  background:var(--card);
  border:1px solid var(--warm);
  border-radius:4px;
  padding:1.5rem;
  margin-bottom:1.5rem;
}

.widget-title {
  font-family:'Playfair Display',serif;
  font-size:1rem;
  font-weight:700;
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}

.submit-widget {
  background:var(--ink);
  color:var(--cream);
  text-align:center;
  padding:2rem 1.5rem;
}

.submit-widget .widget-title { color:var(--cream); border-color:var(--accent2); }

.submit-widget p {
  font-size:.83rem;
  color:#A8A09A;
  line-height:1.6;
  margin-bottom:1.25rem;
}

.tag-cloud { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }

.tag {
  background:var(--cream);
  border:1px solid var(--warm);
  color:var(--ink);
  font-size:.75rem;
  padding:.25rem .6rem;
  border-radius:2px;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}

.tag:hover,
.tag.active { background:var(--accent); color:white; border-color:var(--accent); }

.top-story {
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding:.75rem 0;
  border-bottom:1px solid var(--warm);
  text-decoration:none;
  color:inherit;
}

.top-story:last-child { border-bottom:none; }

.top-num {
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--warm);
  line-height:1;
  flex-shrink:0;
  width:28px;
  transition:color .15s;
}

.top-story:hover .top-num { color:var(--accent); }

.top-info h4 { font-size:.82rem; font-weight:500; line-height:1.3; margin-bottom:.25rem; }
.top-info span { font-size:.7rem; color:var(--muted); }

/* ── CRONICA DETALLE ─────────────────────── */
.cronica-wrap {
  max-width:760px;
  margin:0 auto;
  padding:3rem 2rem;
}

.cronica-article {}

.cronica-meta-top {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem;
  font-size:.75rem;
  color:var(--muted);
}

.cronica-num {
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}

.cronica-date { font-size:.75rem; }

.cronica-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:2.5rem;
}

.cronica-body p {
  font-size:1.05rem;
  line-height:1.85;
  margin-bottom:1.25rem;
  color:#2A2620;
}

/* ── REACCIONES ──────────────────────────── */
.reacciones-box {
  background:var(--card);
  border:1px solid var(--warm);
  border-radius:4px;
  padding:1.5rem 2rem;
  margin-top:3rem;
  text-align:center;
}

.reacciones-label {
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1rem;
}

.reacciones-list { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

.reaction-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  background:var(--cream);
  border:1.5px solid var(--warm);
  border-radius:8px;
  padding:.7rem 1.2rem;
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s;
  font-family:'DM Sans',sans-serif;
}

.reaction-btn:hover { border-color:var(--accent); transform:scale(1.08); }
.reaction-btn.voted { border-color:var(--accent); background:rgba(212,67,42,.06); }

.rx-emoji { font-size:1.5rem; }
.rx-count { font-size:.78rem; color:var(--muted); font-weight:500; }

/* ── CRONICA NAV ─────────────────────────── */
.cronica-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--warm);
}

.nav-link {
  display:flex;
  flex-direction:column;
  gap:.3rem;
  text-decoration:none;
  color:inherit;
  padding:1rem;
  border:1px solid var(--warm);
  border-radius:4px;
  transition:border-color .2s;
  font-size:.82rem;
}

.nav-link:hover { border-color:var(--accent); }
.nav-link span { color:var(--muted); font-size:.72rem; }
.nav-link strong { font-family:'Playfair Display',serif; font-size:.95rem; line-height:1.3; }
.nav-next { text-align:right; }

/* ── FORM ────────────────────────────────── */
.form-wrap {
  max-width:680px;
  margin:0 auto;
  padding:3rem 2rem;
}

.form-header {
  margin-bottom:2.5rem;
}

.form-header h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:700;
  line-height:1.2;
  margin:1rem 0;
}

.form-header h1 em { font-style:italic; color:var(--accent); }
.form-header p { color:var(--muted); font-size:.93rem; line-height:1.7; }

.cronica-form { display:flex; flex-direction:column; gap:1.5rem; }

.form-group { display:flex; flex-direction:column; gap:.4rem; position:relative; }

.form-group label {
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.04em;
}

.form-hint { font-size:.75rem; color:var(--muted); margin-top:-.2rem; }

.required { color:var(--accent); }

.form-group input,
.form-group textarea,
.form-group select {
  border:1.5px solid var(--warm);
  background:var(--card);
  border-radius:2px;
  padding:.75rem 1rem;
  font-family:'DM Sans',sans-serif;
  font-size:.93rem;
  color:var(--ink);
  transition:border-color .2s;
  resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline:none;
  border-color:var(--accent);
}

.char-count {
  font-size:.7rem;
  color:var(--muted);
  text-align:right;
  margin-top:-.2rem;
}

.anon-notice {
  background:rgba(212,67,42,.06);
  border:1px solid rgba(212,67,42,.15);
  border-radius:4px;
  padding:1rem 1.25rem;
  font-size:.83rem;
  color:var(--ink);
  line-height:1.5;
}

.btn-send { align-self:flex-start; }

.success-box {
  text-align:center;
  padding:4rem 2rem;
}

.success-icon {
  font-size:3rem;
  color:var(--accent2);
  margin-bottom:1rem;
}

.success-box h2 {
  font-family:'Playfair Display',serif;
  font-size:2rem;
  margin-bottom:1rem;
}

.error-box {
  background:rgba(212,67,42,.08);
  border:1px solid rgba(212,67,42,.25);
  border-radius:4px;
  padding:1rem 1.25rem;
  margin-bottom:1.5rem;
}

.error-box p { font-size:.85rem; color:var(--accent); }

/* ── FOOTER ──────────────────────────────── */
footer {
  background:var(--ink);
  color:#6A6460;
  text-align:center;
  padding:2rem;
  font-size:.78rem;
  letter-spacing:.05em;
  border-top:3px solid var(--accent);
}

footer span { color:var(--accent); }

/* ── ANIMATIONS ──────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero > * { animation:fadeUp .6s ease both; }
.hero .hero-eyebrow { animation-delay:.1s; }
.hero h1  { animation-delay:.2s; }
.hero p   { animation-delay:.3s; }
.hero-cta { animation-delay:.4s; }

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:768px) {
  .main-wrap { grid-template-columns:1fr; }
  .stories-grid { grid-template-columns:1fr; }
  nav a:not(.btn-submit) { display:none; }
  .cronica-nav { grid-template-columns:1fr; }
}