/* ==========================================================================
   Menú Digital page (menu-digital.html)
   ========================================================================== */

.text-accent { color: #ef6e16; }

/* In-page anchors land below the sticky header */
#funciones-principales,
#porque-adquirirlo,
#configuraciones-adicionales,
#tabletas-menudigital,
#galeria { scroll-margin-top: var(--sr-header-height); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Shared bits ---------- */
.md-figure { margin: 0; text-align: center; }
.md-figure img { display: inline-block; }

.md-section-title {
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
  text-align: center;
}
.md-section-title__heading {
  margin: 0 0 15px;
  font-size: 45px;
  line-height: 45px;
  font-weight: 800;
  color: #3c3b44;
}
.md-section-title__subheading {
  display: inline-block;
  max-width: 80%;
  margin: 0;
  font-size: 18px;
}
@media (max-width: 767.98px) {
  .md-section-title__heading { font-size: 30px; line-height: 30px; }
}

/* White card with soft shadow (¿Por qué adquirir? / Configuraciones) */
.md-card {
  margin-bottom: 10px;
  padding: 20px;
  border-radius: 3px;
  background-color: #fff;
  color: #59667d;
  box-shadow: 3px 3px 9px 0 rgba(0, 0, 0, .2);
}
.md-card__title { color: #414141; }
@media (max-width: 767.98px) {
  .md-card { font-size: 16px; line-height: 30px; }
}

/* Outline-white button used in the purple requirement bars */
.btn-outline-light-md {
  --bs-btn-padding-x: 12px;
  --bs-btn-padding-y: 8px;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: 4px;
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #222;
  --bs-btn-hover-border-color: #222;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #222;
  --bs-btn-active-border-color: #222;
}

/* ---------- Hero ---------- */
/* The original background photo (rawpixel) no longer exists (HTTP 410) —
   the live page shows only this purple overlay on white. */
.md-hero {
  display: flex;
  align-items: center;
  height: 400px;
  padding: 76px 0 23px;
  background-color: #fff;
  text-align: center;
}
.md-hero__overlay { background-color: rgba(58, 43, 76, .87); }
.md-hero__title {
  margin: 0 0 10px;
  font-size: 60px;
  font-weight: 700;
  color: #f7f7f7;
}
.md-hero__subtitle {
  margin: 0 0 60px;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}
.md-hero__lead {
  --animate-duration: 700ms;
  width: 60%;
  margin: 0 auto 30px;
  font-size: 18px;
  line-height: 25px;
  color: #fff;
}
@media (max-width: 991.98px) {
  .md-hero { height: 350px; }
  .md-hero__title { margin-bottom: 20px; }
  .md-hero__lead { width: 90%; font-size: 16px; line-height: 22px; }
}
@media (max-width: 767.98px) {
  .md-hero { height: 300px; }
  .md-hero__title { margin-bottom: 10px; font-size: 40px; line-height: 40px; }
  .md-hero__lead { width: 100%; }
}

/* ---------- In-page navigation ---------- */
.md-section-nav { padding: 10px 0; }
.md-section-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.md-section-nav__list li { display: inline-block; }
.md-section-nav__list a {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 10px 25px;
  border-radius: 5px;
  background-color: #772b78;
  color: #fff;
}
.md-section-nav__list a:hover,
.md-section-nav__list a:focus { background-color: #662067; color: #fff; }
.md-section-nav__list li.is-active a { border-radius: 3px; background-color: #662067; color: #fff; }
@media (max-width: 991.98px) {
  .md-section-nav__list a { margin: 0 2px 5px; padding: 7px 17px; }
}

/* ---------- Intro ---------- */
.md-intro { padding: 88px 0 26px; }
.md-intro__heading {
  font-weight: 600;
  color: #772b78;
}
.md-intro__text { --animate-duration: 700ms; }
.md-intro__title { color: #3c3b44; font-weight: 700; }
.md-intro [data-animate="fadeIn"] { --animate-duration: 500ms; }
.md-intro .md-figure { --animate-duration: 700ms; }
@media (max-width: 767.98px) {
  .md-intro { padding: 61px 0 0; }
}

/* ---------- Benefits ---------- */
.md-benefits {
  padding: 32px 0 89px;
  background-image: linear-gradient(0deg, #f3f5f7 0%, #fff 100%);
}
@media (max-width: 767.98px) {
  .md-benefits { padding: 32px 30px 0; }
  .md-benefits__figure { margin: 20px 0 30px; }
}

.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 0 20px auto;
  padding: 10px;
  border-radius: 3px;
  background-color: #fff;
  color: #59667d;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .3);
  transition: box-shadow .3s;
}
.benefit-card:hover { box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1); }
.benefit-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  background-color: rgba(235, 241, 255, .6);
  color: #6b1678;
  font-size: 20px;
  transition: .3s;
}
.benefit-card:hover .benefit-card__icon { background: #6b1678; color: #fff; }
.benefit-card__body { flex: 1 1 auto; min-width: 0; }
.benefit-card__title {
  margin: 18px 0 5px;
  color: #59667d;
  transition: color .3s;
}
.benefit-card:hover .benefit-card__title { color: #6b1678; }
.benefit-card__text { font-size: 16px; font-weight: 400; line-height: 24px; }
@media (max-width: 991.98px) {
  .benefit-card { margin: 0 0 20px; padding: 15px; }
}
@media (max-width: 767.98px) {
  .benefit-card { margin-bottom: 10px; }
  .benefit-card__title { font-size: 20px; line-height: 30px; }
  .benefit-card__text { font-size: 14px; }
}

/* ---------- Requirement bars ---------- */
.md-requirements-bar {
  padding: 20px 10px;
  background-color: #5a466b;
  color: #fff;
}
.md-requirements-bar__text { margin: 15px 0 1rem; font-size: 17px; text-align: center; }
@media (max-width: 767.98px) {
  .md-requirements-bar--top .btn { margin-bottom: 20px; }
}

/* ---------- Main functions ---------- */
.md-functions {
  padding: 86px 0;
  background-color: #ededed;
  background-image: url('../../img/menu-digital/funciones-bg.jpg');
  background-position: 50% 100%;
}
.md-functions__overlay { background-color: rgba(55, 55, 55, .81); mix-blend-mode: difference; }

.function-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 0 20px auto;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .43);
  color: #fff;
  transition: box-shadow .3s;
}
.function-item:hover { box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1); }
.function-item__icon {
  flex: 0 0 auto;
  display: inline-block;
  padding: 10px 10px 6px;
  border: 2px solid #772b78;
  border-radius: 100px;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  transition: .3s;
}
.function-item__icon i { width: 20px; height: 20px; line-height: 20px; }
.function-item:hover .function-item__icon { background: #6b1678; color: #fff; }
.function-item__text { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 24px; }
.function-item__text p:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .function-item { margin: 0 0 20px; padding: 15px; }
}
@media (max-width: 767.98px) {
  .function-item { margin-bottom: 10px; }
}

/* ---------- ¿Por qué adquirir? ---------- */
.md-why {
  padding: 120px 0 48px;
  background-image: linear-gradient(0deg, #fff 0%, #f3f5f7 100%);
}
.md-why__note { margin: 0; padding: 10px 0; }
.md-alert {
  padding: 12px 20px;
  border-radius: 4px;
  background: #333a41;
  color: #fff;
  box-shadow: 3px 3px 9px 0 rgba(0, 0, 0, .2);
}
.md-alert p:last-child { margin-bottom: 0; }
.md-why [data-animate="fadeIn"] { --animate-duration: 500ms; }
.md-why__figure { --animate-duration: 700ms; }
@media (max-width: 767.98px) {
  .md-why { padding: 64px 0 0; }
  .md-why__card { margin-bottom: 15px; }
  .md-alert { margin-bottom: 30px; }
}

/* ---------- Configuraciones adicionales ---------- */
.md-settings { padding: 40px 0 67px; }
.md-settings [data-animate] { --animate-duration: 700ms; }
@media (max-width: 767.98px) {
  .md-settings__card { margin-bottom: 30px; }
}

/* ---------- Table-map banner ---------- */
.md-table-map {
  padding: 68px 0;
  background-image: url('../../img/menu-digital/mapa-mesas-bg.jpg');
  background-position: 50% 50%;
}
.md-table-map__overlay { background-color: rgba(56, 11, 63, .54); }
.md-table-map__text {
  width: 85%;
  margin: 0 auto 30px;
  font-weight: 600;
  color: #fbfbfb;
  text-align: center;
}
@media (max-width: 991.98px) {
  .md-table-map__text { width: 100%; }
}
@media (max-width: 767.98px) {
  .md-table-map { padding: 72px 0 71px; }
}

/* ---------- Recommended tablets (pills + collage cards) ---------- */
.md-tablets { padding: 120px 0 65px; }
.md-tablets__heading { font-size: 40px; line-height: 40px; color: #122646; }
@media (max-width: 767.98px) {
  .md-tablets__heading { font-size: 30px; line-height: 30px; }
}
.md-tablets__tabs { margin-bottom: 30px; }

.md-tablets__nav { gap: 2px; }
.md-tablets__nav .nav-link {
  padding: 13px 15px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.42857143;
  font-weight: bolder;
  color: inherit;
  background: none;
}
.md-tablets__nav .nav-link:hover,
.md-tablets__nav .nav-link:focus { color: #772b78; background: none; }
.md-tablets__nav .nav-link.active,
.md-tablets__nav .nav-link.active:hover,
.md-tablets__nav .nav-link.active:focus { color: #fff; background-color: #772b78; }
.md-tablets__content { margin-top: 15px; }

.tablet-card { margin-bottom: 30px; }
.tablet-card__img { display: block; width: 100%; height: auto; }
.tablet-card__col { display: flex; flex-wrap: wrap; align-items: center; }
.tablet-card__content {
  position: relative;
  z-index: 1;
  margin-left: -10%;
  padding: 30px 40px 40px;
  background: linear-gradient(225deg, rgba(79, 11, 84, .75) 0%, rgba(61, 59, 136, .95) 100%) transparent;
  box-shadow: -10px 15px 20px 0 rgba(0, 0, 0, .3);
  text-align: left;
}
.tablet-card__title {
  margin: 0 0 15px;
  font-size: 30px;
  line-height: 35px;
  color: #fff;
}
.tablet-card__specs { margin-bottom: 0; color: rgba(255, 255, 255, .8); }
@media (max-width: 991.98px) {
  .tablet-card { margin-bottom: 20px; }
}
@media (max-width: 767.98px) {
  .tablet-card { margin-bottom: 10px; }
  .tablet-card__content { margin: auto; }
}

/* ---------- Gallery ---------- */
.md-gallery {
  padding: 74px 0 92px;
  background-color: #f3f5f7;
  color: #59667d;
}
.md-gallery__heading { font-size: 30px; line-height: 30px; }
.md-gallery__list { margin-bottom: 30px; }
.md-gallery__list img { width: 210px; height: 150px; object-fit: cover; }
@media (max-width: 991.98px) {
  .md-gallery__list { margin-bottom: 20px; }
  .md-gallery__list img { width: 130px; height: 115px; }
}
@media (max-width: 767.98px) {
  .md-gallery__list { margin-bottom: 10px; }
  .md-gallery__list img { width: auto; height: auto; }
}

/* ---------- Requirements modal ---------- */
.md-requirements-modal .modal-dialog { max-width: 650px; }
.md-requirements-modal .modal-content { border-radius: 0; }
.md-requirements-modal .modal-body { padding: 20px 30px; text-align: left; }
.md-requirements-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; }