/* ========== Reset básico ========== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: #1a1a1a;
}
a{ color: #0b67c2; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ========== Header tipo imagen (cuadritos azules) ========== */
.topbar{
  height: 170px;
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(90deg, rgba(255,255,255,.55) 0 50%, rgba(255,255,255,0) 50% 100%),
    linear-gradient(0deg,  rgba(255,255,255,.55) 0 50%, rgba(255,255,255,0) 50% 100%),
    linear-gradient(0deg, #4aa3ff, #2e86e6);
  background-size: 110px 110px, 110px 110px, 100% 100%;
}

.topbar__pipe{
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  width: min(920px, 84vw);
  height: 28px;
  background: rgba(255,255,255,0.9);
  border-radius: 999px;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}

.topbar__badge{
  position: absolute;
  right: 40px;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #66d18c;
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 14px;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* ========== Fondo con lunares/estilo scrapbook ========== */
.wrap{
  width: min(1100px, 96vw);
  margin: 24px auto 60px;
  padding: 18px;
  border-radius: 18px;
  position: relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);

  background:
    /* mini “corazones” (confeti) */
    radial-gradient(circle at 12% 58%, rgba(255,110,150,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 14% 64%, rgba(255,110,150,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 56%, rgba(255,110,150,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 62%, rgba(255,110,150,.45) 0 2px, transparent 3px),

    /* lunares */
    radial-gradient(circle at 15% 10%, #d9e34c 0 70px, transparent 71px),
    radial-gradient(circle at 70% 18%, #b31a4a 0 62px, transparent 63px),
    radial-gradient(circle at 90% 48%, #d9e34c 0 85px, transparent 86px),
    radial-gradient(circle at 96% 6%,  #d9e34c 0 62px, transparent 63px),
    radial-gradient(circle at 6% 55%,  #b31a4a 0 58px, transparent 59px),

    /* base */
    linear-gradient(#ffffff, #f7f7f7);

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
}

/* ========== Caja base (tarjetas) ========== */
.box{
  background: linear-gradient(135deg, #cfeedd, #b7e6d0);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 12px 22px rgba(0,0,0,.16),
    inset 0 0 0 2px rgba(255,255,255,.55);
}

/* Marco grande “foto” */
.big-frame{
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #d7f2e4, #bfead5) border-box;
  border: 12px solid transparent;
  outline: 10px solid rgba(152, 220, 190, .35);
  outline-offset: -18px;
}

/* Banner */
.long-label h1{ margin: 0 0 6px; }
.long-label p{ margin: 0; }

/* Posts */
.post{
  background: #ffffffcc;
  backdrop-filter: blur(2px);
}
.post h2{ margin-top: 0; }

/* Footer ovalado */
.oval{
  border-radius: 999px;
  text-align: center;
  background:
    radial-gradient(circle at 40% 35%, #ffffff 0 55%, #f8fff9 56% 100%);
  box-shadow:
    0 12px 22px rgba(0,0,0,.18),
    inset 0 0 0 10px rgba(152, 220, 190, .35);
}

/* Sidebar */
.sidebar .box + .box{ margin-top: 14px; }
.sidebar ul{ margin: 8px 0 0; padding-left: 18px; }

/* ========== Responsive ========== */
@media (max-width: 900px){
  .wrap{
    grid-template-columns: 1fr;
  }
  .topbar{ height: 150px; }
}