/* RECURSOS PAGE */

/* Título principal ya hereda estilos de index.css */
h1.section-title {
  color: var(--brand);
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 0 40px;
}

/* Subtítulos de área */
.area-title {
  color: var(--brand);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 30px 0 16px;
  letter-spacing: .5px;
}

/* GRID */
.grid {
  display: grid;
  gap: 24px;
  margin-bottom: 50px;   /* 🔹 FIX: agrega aire debajo de cada grid */
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* CARD / ITEM */
.item {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: .25s ease;
}

.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 255, 136, .08);
  border-color: rgba(0,255,136,.3);
}

/* IMAGEN */
.thumb {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  aspect-ratio: 16/10;
  background: var(--panel);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.93) contrast(1.05);
  transition: .4s;
}

.item:hover .thumb img {
  transform: scale(1.04);
  filter: brightness(1) contrast(1.08);
}

/* BODY */
.item-body {
  padding: 18px 18px 16px;
}

.item-body strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.tag {
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 10px;
}

.bullets {
  margin: 0 0 10px 18px;
  color: var(--muted);
  font-size: 14px;
}

.bulleted {
  margin: 8px 0 16px 18px;
  color: var(--text);
  line-height: 1.7;
}

/* PRECIOS */
.prices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.price-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 13px;
  color: var(--text);
}

/* INFO caja inferior */
.info-box {
  margin-top: 40px;  /* 🔹 FIX: asegura separación extra */
}

.info-box .muted{
  color: var(--muted);
}

/* RESPONSIVE */
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ===== CAR-KIT section (ru = recursos ui local) ===== */
.ru-section { 
  margin: 48px 0 60px; 
}
.ru-section-title {
  color: var(--brand);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 16px;
}

/* Card */
.ru-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 430px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ru-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(0,255,136,.10);
  border-color: rgba(0,255,136,.30);
}

/* Thumb */
.ru-thumb { 
  padding: 16px 16px 0;
}
.ru-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}

/* Body */
.ru-body { 
  padding: 18px 16px 16px;
}
.ru-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 6px;
  color: var(--text);
}
.ru-sub {
  color: var(--muted);
  margin: 0 0 12px;
}

/* Listado */
.ru-list { 
  margin: 0 0 16px 18px; 
}
.ru-list li { 
  margin: 6px 0; 
  color: var(--text);
}

/* Chips de precio */
.ru-prices { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
}
.ru-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--muted);
}
.ru-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600; /* 👈 fuerza negrita */
}
.ru-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.thumb img {
  transform: scale(1.1);
}