/* =========================
BASE
========================= */

body{
  font-family: "Inter", sans-serif;
  margin:0;
  background:#FFFFFF;
  color:#222;
}

/* =========================
HEADER
========================= */

.site-header{
  background:#1D1D1B;
  color:white;
}

.header-wrap{
  max-width:1100px;
  margin:auto;
  padding:6px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.header-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  height:32px;
}

.site-name{
  font-weight:600;
  font-size:15px;
}

.header-right{
  font-size:15px;
}

/* =========================
HERO
========================= */

.hero{
  text-align:center;
  padding:50px 20px 25px;
}

h1{
  font-family:"Merriweather", serif;
  font-size:50px;
  margin:0 0 10px 0;
  color:#1D1D1B;
}

.subtitle{
  max-width:700px;
  margin:0 auto 25px;
  font-size:18px;
  line-height:1.6;
  color:#1D1D1B;
}

/* =========================
BUSCADOR
========================= */

#search{
  padding:12px;
  width:90%;
  max-width:420px;
  border-radius:8px;
  border:1px solid #ccc;
  font-size:15px;
}

/* =========================
FILTROS
========================= */

.filters{
  text-align:center;
  margin-top:15px;
}

.filters button{
  margin:5px;
  padding:8px 14px;
  border:none;
  border-radius:20px;
  background:#e0e6ed;
  cursor:pointer;
  font-size:14px;
}

.filters button.active{
  background:#1D1D1B;
  color:white;
}

/* =========================
DESTACADOS (fila superior)
========================= */

.destacados{
  display:grid;
  grid-template-columns: repeat(2, 300px); /* ancho fijo */
  justify-content: center; /* los centra */
  gap:20px;
  max-width:1100px;
  margin:30px auto 10px;
  padding:0 25px;
}

@media (max-width: 700px){
  .destacados{
    grid-template-columns: 1fr; /* en celular se apilan */
  }
}

/* =========================
GRID NORMAL
========================= */

.container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
  padding:25px;
  max-width:1100px;
  margin:auto;
}

/* =========================
CARDS
========================= */

.card{
  background:#e0e6ed;
  border-radius:12px;
  padding:18px;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.card h3{
  font-family:"Merriweather", serif;
  font-size:18px;
  margin:0 0 8px 0;
}

.card .autor{
  font-size:12px;
  color:#666;
  margin-top:4px;
  font-style:italic;
}

.card p{
  font-size:14px;
  color:#555;
  line-height:1.5;
}

.card a{
  display:inline-block;
  margin-top:12px;
  font-weight:600;
  text-decoration:none;
  color:white;
  background:#00DA60;
  padding:8px 14px;
  border-radius:6px;
  font-size:14px;
}

.card a:hover{
  background:#2e5a8a;
}

.card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  margin-bottom:10px;
}

/* =========================
CARD DESTACADO
========================= */

.card.destacado{
  background:#00DA60;
  color:white;
  transform:scale(1.03);
}

.card.destacado p{
  color:#1D1D1B;
}

.card.destacado a{
  background:white;
  color:#1D1D1B;
}

.card.destacado a:hover{
  background:#e0e6ed;
}