/* ==========================================================================
   BLOG — Post (Figma node 3069:1430)
   ========================================================================== */

/* ------------------------------ HERO (3069:1431) -------------------------
   Fondo rosa claro, título rosa a la izquierda (528px) e imagen 638x425 con
   radio 40 a la derecha, separados 130px.                                  */
.bp-hero {
  display: flex;
  align-items: center;
  /* space-between reparte el hueco igual que en Figma (130px sobre 1440) sin
     desbordar cuando la pantalla es más estrecha. */
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 240px var(--grid-margin) 120px;
  background: var(--color-bg);
}
.bp-hero h1 {
  flex: 0 0 auto;
  width: var(--w-5col);
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-secundario);
  line-height: var(--lh-base);
}
.bp-hero__img {
  flex: 0 0 auto;
  width: var(--w-6col);
  max-width: 100%;
  border-radius: 40px;
  overflow: hidden;
}
.bp-hero__img img {
  width: 100%;
  height: 425px;
  object-fit: cover;
  display: block;
}

/* ------------------------------ CUERPO ----------------------------------- */
.bp-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;   /* 748 + hueco + 419 = 1296; el hueco lo reparte space-between */
  width: 100%;
  padding: 120px var(--grid-margin);
  background: var(--color-blanco);
}

.bp-article {
  flex: 0 1 auto;
  width: var(--w-7col);
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
  line-height: 1.4;
}
.bp-article p { margin: 0 0 24px; }
.bp-article p:last-child { margin-bottom: 0; }
.bp-article strong { font-weight: var(--fw-bold); }

/* --- Barra lateral: es una TARJETA con marco rosa, no una columna suelta -- */
.bp-sidebar {
  flex: 0 0 auto;
  width: var(--w-4col);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 40px 32px;
  border: 2px solid var(--color-secundario);
  border-radius: 40px;
  background: var(--color-blanco);
}

.bp-sidebar input {
  width: 100%;
  padding: 10px 24px;
  border-radius: 64px;
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
}
.bp-sidebar input::placeholder { color: var(--color-primario); opacity: 1; }

.bp-sidebar__bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}
.bp-sidebar h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  /* text-transform: uppercase; */
}
/* "Entradas recientes" va en rosa y "También te puede interesar" en morado */
.bp-sidebar__bloque--recientes h4 { color: var(--color-secundario); }
.bp-sidebar__bloque--relacionados h4 { color: var(--color-primario); }

.bp-recientes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.bp-recientes a {
  display: block;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-secundario);
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
  transition: color 0.2s ease;
}
.bp-recientes a:last-child { padding-bottom: 0; border-bottom: none; }
.bp-recientes a:hover { color: var(--color-secundario); }

.bp-relacionados {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}
.bp-relacionados a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.bp-relacionados img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  /* Sólo las esquinas superiores, con radio 80 */
  border-radius: 80px 80px 0 0;
  display: block;
}
.bp-relacionados h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
  text-transform: none;
}
.bp-relacionados span {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
}

/* ---------------------- Navegación entre notas ---------------------------
   La banda blanca debe ocupar TODO el ancho (es la continuación de la sección
   del post). Antes el blanco sólo cubría los 638px del bloque y se veía como
   un rectángulo suelto sobre el rosa de la página.                         */
.bp-nav {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 var(--grid-margin) 120px;
  background: var(--color-blanco);
}
.bp-nav__inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: var(--w-6col);
  max-width: 100%;
}
.bp-nav a {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
  transition: color 0.2s ease;
}
.bp-nav a:hover { color: var(--color-secundario); }
.bp-nav a img { width: 14px; height: auto; }
.bp-nav a.bp-nav__siguiente img { transform: rotate(180deg); }

@media (max-width: 1023px) {
  .bp-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 200px var(--grid-margin) 80px;
  }
  .bp-hero h1 { width: 100%; font-size: clamp(24px, 3.6vw, 40px); }
  .bp-hero__img { width: 100%; }
  .bp-hero__img img { height: auto; aspect-ratio: 638 / 425; }

  .bp-body { flex-direction: column; gap: 56px; padding: 80px var(--grid-margin); }
  .bp-article { flex: 1 1 auto; width: 100%; }
  .bp-sidebar { flex: 1 1 auto; width: 100%; max-width: 560px; }
  .bp-nav { padding-bottom: 80px; }
}

@media (max-width: 767px) {
  .bp-hero { padding: 160px var(--grid-margin) 56px; }
  .bp-body { padding: 56px var(--grid-margin); }
  .bp-sidebar { padding: 32px 24px; gap: 48px; }
  .bp-relacionados img { border-radius: 48px 48px 0 0; }
  .bp-nav { flex-direction: column; align-items: flex-start; gap: 16px; }
}