/*
Theme Name: SILPAPO Child
Template: astra
Version: 1.0
*/

/* ===== Base ===== */
:root{
  --bg:#0b1220;
  --card:#101a30;
  --text:#eaf0ff;
  --muted:#b9c6e6;
  --accent:#66d0ff;
  --radius:18px;
  --max:1100px;
}

body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

a{ color: var(--accent); }

/* ===== Home layout (centrado tipo landing) ===== */
.home header.site-header,
.home #masthead{
  display:none !important;
}

/* Si Astra mete espacio arriba, lo anulamos */
.home .site-content,
.home .site-content .ast-container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.silpapo-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 18px;
}

/* Centrar verticalmente SOLO en la home */
.home .silpapo-wrap{
  min-height: 100vh;
  display: grid !important;
  place-items: center !important;
}

/* ===== Hero ===== */
.silpapo-hero{
  width: min(720px, 100%);
  padding: 56px 24px;
  border-radius: var(--radius);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(102,208,255,.25), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(130,90,255,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.silpapo-hero h1{
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 10px;
}

.silpapo-hero p{
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 70ch;
}

/* ===== Buttons ===== */
.silpapo-btns{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.silpapo-btn{
  display:inline-block;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  font-weight:600;
}

.silpapo-btn.primary{
  background: linear-gradient(135deg, rgba(102,208,255,.25), rgba(130,90,255,.20));
  border-color: rgba(102,208,255,.35);
}

/* ===== Optional cards (si las tienes en front-page.php) ===== */
.silpapo-grid{
  display:grid;
  gap:16px;
  margin-top:18px;
  grid-template-columns: repeat(12, 1fr);
}

.silpapo-card{
  grid-column: span 4;
  padding:18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.silpapo-card h3{
  margin:0 0 6px;
  font-size:18px;
}

.silpapo-card p{
  margin:0;
  color: var(--muted);
}

.silpapo-strip{
  margin-top:18px;
  padding:16px 18px;
  border-radius: var(--radius);
  border: 1px dashed rgba(255,255,255,.18);
  color: var(--muted);
}

@media (max-width: 900px){
  .silpapo-hero h1{ font-size: 36px; }
  .silpapo-card{ grid-column: span 12; }
}