/* ==========================================================
   Correct Bible - 404 Page
========================================================== */

.ib-404-page{
  width:100%;
  min-height:calc(100svh - 80px);
  padding:28px 20px 72px;
  background:
    radial-gradient(circle at 15% 15%, rgba(63,99,168,.16), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(66,153,225,.12), transparent 34%),
    linear-gradient(180deg,#f8fbff 0%,#ffffff 52%,#f5f8fd 100%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  box-sizing:border-box;
}

.ib-404-inner{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  text-align:center;

  background:
    linear-gradient(
      90deg,
      rgba(235,241,250,.94) 0%,
      rgba(255,255,255,.985) 48%,
      rgba(235,241,250,.94) 100%
    );

  border:1px solid rgba(62,93,148,.10);

  border-radius:34px;

  padding:
  clamp(28px,3vw,42px)
  clamp(24px,5vw,80px)
  clamp(30px,3vw,44px);

  box-shadow:
    0 18px 40px rgba(31,52,95,.08),
    0 38px 95px rgba(31,52,95,.16),
    0 8px 18px rgba(31,52,95,.06),
    inset 0 1px 0 rgba(255,255,255,.92);

  backdrop-filter:blur(10px);
}

.ib-404-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  height:54px;
  margin-bottom:10px;
  margin:0 auto 24px;
  padding:0 26px;
  border-radius:999px;
  background:#edf4ff;
  color:#31599b;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.12em;
}

.ib-404-title{
  margin:0 auto 22px;
  max-width:980px;
  margin-bottom:18px;
  color:#24314d;
  font-size:clamp(3.2rem,7vw,6.4rem);
  line-height:1;
  font-weight:900;
  letter-spacing:-.045em;
}

.ib-404-description{
  max-width:680px;
  margin:0 auto 14px;
  color:#475672;
  font-size:clamp(1.12rem,2vw,1.45rem);
  line-height:1.75;
}

.ib-404-help{
  max-width:720px;
  margin:0 auto 34px;
  color:#6b7892;
  margin-bottom:40px;
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.65;
}

.ib-404-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
}

.ib-404-btn{
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  border-radius:999px;
  background:#e4ecf8;
  color:#173861;
  border:1px solid rgba(49,89,155,.14);
  text-decoration:none;
  font-size:1.04rem;
  font-weight:850;
  line-height:1.2;
  box-shadow:0 12px 30px rgba(34,66,120,.10);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ib-404-btn:hover{
  transform:translateY(-2px);
  background:#d8e4f5;
  box-shadow:0 18px 38px rgba(34,66,120,.16);
}

.ib-404-btn--primary{
  background:#3f63a8;
  color:#fff;
  border-color:#3f63a8;
  box-shadow:0 14px 32px rgba(63,99,168,.26);
}

.ib-404-btn--primary:hover{
  background:#355895;
  color:#fff;
}

[dir="rtl"] .ib-404-inner{
  direction:rtl;
}

@media (max-width:767px){
  .ib-404-page{
    min-height:auto;
    padding:10px 14px 30px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }

  .ib-404-inner{
    border-radius:26px;
    padding:30px 40px 30px;
    margin-top:0;
    margin-bottom:0px;
    max-width:100%;

    box-shadow:
      0 14px 34px rgba(31,52,95,.12),
      0 30px 76px rgba(31,52,95,.20),
      0 6px 16px rgba(31,52,95,.08),
      inset 0 1px 0 rgba(255,255,255,.92);
  }

  .ib-404-page .ib-404-code{
    min-width:92px;
    height:46px;
    margin-bottom:22px;
    font-size:1.1rem;
  }

  .ib-404-page .ib-404-title{
    font-size:clamp(2.2rem,9vw,3.4rem);
    line-height:.98;
    letter-spacing:-.055em;
    margin-bottom:18px;
    font-weight:900;
  }

  .ib-404-page .ib-404-description{
    font-size:1.02rem;
    line-height:1.8;
    color:#53627e;
    margin-bottom:14px;
  }

  .ib-404-page .ib-404-help{
    font-size:.96rem;
    line-height:1.6;
    color:#6b7892;
    margin-bottom:30px;
  }

  .ib-404-actions{
    flex-direction:column;
    gap:14px;
  }

  .ib-404-btn{
    width:100%;
    min-height:58px;
    font-size:1.06rem;
  }
}

/* ==========================================================
   Ajuste final 404
========================================================== */

.ib-404-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.ib-404-title{
  text-align:center;
}

.ib-404-description{
  text-align:start;
}

.ib-404-help{
  text-align:center;
}

/* En móvil el texto de ayuda NO va centrado */
@media (max-width:767px){
    
    .ib-404-description{
  text-align:start;
}
  .ib-404-help{
    text-align:start;
  }
}