/* ==========================================================================
   Implementación (Soft Restaurant® Móvil) — page styles
   ========================================================================== */

/* ---------- Hero banner ---------- */
.impl-hero {
  padding: 200px 0;
  /* Same photo as the Comandero Móvil hero (k-170-chim-1722). */
  background-image: url('../../img/shared/restaurante-comandero-bg.webp');
  background-color: #3a3a3a;
}
.impl-hero__overlay { background: linear-gradient(45deg, rgba(8, 8, 8, .5) 0%, rgba(8, 8, 8, .5) 100%); }

/* ---------- YouTube channel bar ---------- */
.youtube-bar { padding: 5px; background-color: #e84a4b; }
.youtube-bar__btn {
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 12px;
  --bs-btn-font-size: 16px;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: 4px;
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
}

/* ---------- Main area ---------- */
.impl-main { padding: 80px 0; }

.video-card__title {
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.impl-divider {
  margin: 30px 0;
  border: 0;
  border-bottom: 1px solid #ccc;
  opacity: 1;
}

/* Download block (purple band) */
.download-box { padding: 10px 0 1px; background-color: #58456a; }
.download-box__logo { display: block; width: auto; max-width: calc(100% - 440px); margin: 10px auto 30px; }
.download-box__text { margin: 0 50px 30px; color: #fff; }
.download-box__btn {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: 16px;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: 5px;
  --bs-btn-color: #fff;
  --bs-btn-bg: #e86e24;
  --bs-btn-border-color: #e86e24;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b95215;
  --bs-btn-hover-border-color: #b95215;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b95215;
  --bs-btn-active-border-color: #b95215;
  margin-bottom: 30px;
  border-bottom: 5px solid #b95215; /* "3D" button */
}
.download-box__btn:hover { border-bottom-color: #b95215; }

/* ---------- Sidebar: requirements accordion ---------- */
.impl-sidebar { padding: 20px; background-color: #f1f1f1; }

.requirements-accordion { margin-bottom: 30px; }
.requirements-accordion .accordion-item {
  margin: 0 0 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 0;
}
.requirements-accordion .accordion-header { margin: 0; }
.requirements-accordion .accordion-button {
  padding: 10px 30px 10px 15px;
  font-size: 14px;
  font-weight: bolder;
  letter-spacing: 0;
  color: inherit;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: .4s;
}
.requirements-accordion .accordion-button::after { display: none; }
.requirements-accordion .accordion-button:not(.collapsed) { color: inherit; background-color: transparent; box-shadow: none; }
.requirements-accordion .accordion-button:focus-visible { outline: 2px solid var(--sr-orange); outline-offset: -2px; }
.requirements-accordion .accordion-body { padding: 15px; border-top: 1px solid transparent; }

/* ---------- Tablet ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .impl-main { padding: 56px 0; }
  .video-card { margin-bottom: 30px; }
  .impl-divider { margin: 20px 0; }
  .download-box__logo { max-width: calc(100% - 400px); margin: 10px auto 20px; }
  .download-box__text { margin: 0 30px 20px; }
  .download-box__btn { margin-bottom: 20px; }
  .requirements-accordion { margin-bottom: 20px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .impl-main { padding: 47px 0 11px; }
  .video-card { margin-bottom: 20px; }
  .impl-divider { margin: 10px 0 20px; }
  .download-box__logo { max-width: calc(100% - 200px); margin: 0 auto 10px; }
  .download-box__text { margin: 0 10px 10px; }
  .download-box__btn { margin-bottom: 10px; }
  .requirements-accordion { margin-bottom: 10px; }
}