/* Estilos para páginas /estafas/ (usan <main class="container">) */

.container{
  max-width:1100px;
  margin:60px auto;
  padding:0 20px;
}

/* Breadcrumb */
.breadcrumb{
  font-size:0.9rem;
  margin:20px 0 30px;
  color:var(--muted);
}
.breadcrumb a{
  text-decoration:none;
  color:var(--brand-2);
}
.breadcrumb a:hover{
  text-decoration:underline;
}

/* Hero en secundarias: no tocamos .hero del index.
   En tus páginas de estafas ya usas <section class="hero">, así que
   lo definimos aquí, pero SOLO afectará si este CSS se carga en estafas. */
.hero{
  text-align:center;
  margin-bottom:60px;
}

.hero h1{
  font-size:2.4rem;
  color:var(--brand-1);
  margin-bottom:15px;
}

.hero p{
  font-size:1.1rem;
  color:var(--muted);
}

/* Grid de tarjetas (index /estafas/) */
.estafa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:30px;
  margin-bottom:70px;
}

.estafa-card{
  background:var(--panel);
  padding:25px;
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  transition:all 0.2s ease;
}

.estafa-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.estafa-card h2{
  font-size:1.2rem;
  margin-bottom:12px;
  color:var(--brand-2);
}

.estafa-card p{
  font-size:0.95rem;
  color:var(--muted);
  margin-bottom:20px;
}

/* Botones dentro de estafas: reutilizamos tu .btn base del index
   y sólo añadimos variantes suaves si quieres */
.btn-primary{
  display:inline-block;
  padding:14px 26px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  box-shadow:0 10px 30px rgba(11,31,58,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(11,31,58,.35);
}

.btn-secondary{
  display:inline-block;
  padding:10px 18px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  box-shadow:0 10px 30px rgba(11,31,58,.20);
}

/* CTA final */
.cta-final{
  background:var(--brand-1);
  color:#fff;
  text-align:center;
  padding:50px 20px;
  border-radius:var(--radius);
}

.cta-final h2{ margin-bottom:15px; }
.cta-final p{ margin-bottom:25px; opacity:0.9; }