/* ==========================================================================
   Add Ons page (addons.html)
   ========================================================================== */

.text-accent { color: #ef6e16; }

/* ---------- Hero ---------- */
.addons-hero {
  display: flex;
  align-items: center;
  height: 400px;
  padding: 76px 0 23px;
  background-image: url('../../img/addons/hero-bg.webp');
  background-position: 0 0;
  text-align: center;
}
.addons-hero__overlay { background-color: rgba(0, 0, 0, .38); }
.addons-hero__title {
  margin: 0 0 10px;
  font-size: 60px;
  font-weight: 700;
  color: #f7f7f7;
}
.addons-hero__subtitle {
  width: 60%;
  margin: 0 auto 60px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 400;
  color: #fff;
}
@media (max-width: 991.98px) {
  .addons-hero { height: 350px; }
  .addons-hero__title { margin-bottom: 20px; }
}
@media (max-width: 767.98px) {
  .addons-hero { height: 300px; }
  .addons-hero__title { margin-bottom: 10px; }
}

/* ---------- Sticky section navigation ---------- */
.addons-nav {
  position: sticky;
  top: var(--sr-header-height);
  z-index: 998;
  padding: 9px 0;
  background-color: #4d4161;
}
.addons-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.addons-nav__list li { display: inline-block; }
.addons-nav__list a {
  display: inline-block;
  margin: 0 5px;
  padding: 5px;
  border-radius: 4px;
  color: #fff;
}
.addons-nav__list a:hover,
.addons-nav__list a:focus { color: #fff; background-color: rgba(152, 167, 180, .35); }
.addons-nav__list li.is-active a { background-color: #ec6000; color: #fff; }
@media (max-width: 991.98px) {
  .addons-nav__list a { font-size: 14px; }
}
@media (max-width: 767.98px) {
  .addons-nav { padding: 5px 0; }
  .addons-nav__list a { padding: 3px 5px 5px 3px; font-size: 13px; }
}

/* In-page anchors land below the sticky header + section nav */
.addon-feature { scroll-margin-top: 120px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Add-on feature sections ---------- */
.addon-feature--pattern {
  background-image: url('../../img/shared/patron-bg.webp');
  background-position: 0 0;
}
.addon-feature__overlay { background-color: rgba(243, 243, 243, .71); }
.addon-feature__shape svg { height: 60px; }
.addon-feature__shape path { fill: #fff; }

#menu-digital { padding: 18px 0 15px; }
.addon-feature--movil { padding: 17px 0 51px; }
.addon-feature--analytics { padding: 77px 0 39px; }
@media (max-width: 767.98px) {
  #menu-digital,
  .addon-feature--analytics { padding: 52px 0; }
}

.addon-feature__media { margin: 0 0 30px; text-align: center; }
.addon-feature__media img { display: inline-block; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .addon-feature__media--movil img { max-width: 500px; }
}
.addon-feature__media--analytics img { width: 500px; max-width: 500px; }
@media (max-width: 767.98px) {
  .addon-feature__media--analytics img { max-width: 350px; }
}
@media (max-width: 575.98px) {
  /* keep the fixed-width image inside small viewports */
  .addon-feature__media--analytics img { width: 100%; }
}

.addon-feature__title {
  margin: 0 0 60px;
  font-size: 40px;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .addon-feature__title { font-size: 30px; line-height: 30px; }
}

.addon-feature__list {
  margin: 0 0 30px;
}
.addon-feature__list li { margin-bottom: 1rem; }

.addon-feature__actions { padding: 1px 0 4px; }
.addon-feature__actions > [class*="col-"] { margin-bottom: 30px; }

/* "Más información" (green, round) */
.btn-addon-info {
  --bs-btn-padding-x: 12px;
  --bs-btn-padding-y: 8px;
  --bs-btn-line-height: 1.25;
  --bs-btn-color: #fff;
  --bs-btn-bg: #23cf5f;
  --bs-btn-border-color: #23cf5f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1fae51;
  --bs-btn-hover-border-color: #1fae51;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1fae51;
  --bs-btn-active-border-color: #1fae51;
  --bs-btn-focus-shadow-rgb: 35, 207, 97;
}

/* "Leer más" (light outline, round) */
.btn-addon-more {
  --bs-btn-padding-x: 12px;
  --bs-btn-padding-y: 8px;
  --bs-btn-line-height: 1.25;
  --bs-btn-color: #9fa1a6;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #cdd4e0;
  --bs-btn-hover-color: #6c757d;
  --bs-btn-hover-bg: #ecf0f5;
  --bs-btn-hover-border-color: #ecf0f5;
  --bs-btn-active-color: #6c757d;
  --bs-btn-active-bg: #ecf0f5;
  --bs-btn-active-border-color: #ecf0f5;
}

/* ---------- Form modals ---------- */
.addons-modal .modal-dialog { max-width: 760px; }
.addons-modal .modal-content { border-radius: 0; }
.addons-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.addons-modal .modal-body { padding: 20px 30px; }