/* ==========================================================================
   Soft Restaurant® Colombia — shared styles
   Loaded on every page after Bootstrap 5. Page-specific styles live in
   assets/css/pages/<page>.css.
   ========================================================================== */

:root {
  --sr-orange: #ee6f23;
  --sr-orange-dark: #ec6000;
  --sr-orange-hover: #eb5f0b;
  --sr-purple: #5a466b;
  --sr-purple-alt: #59456a;
  --sr-text: #252525;
  --sr-muted: #575757;
  --sr-footer-bg: #3c3b44;
  --sr-footer-text: #f3f5fb;
  --sr-footer-link: #b0b5b9;
  --sr-header-height: 60px;

  --bs-body-font-family: 'Roboto', sans-serif;
  --bs-body-font-size: 16px;
  --bs-body-color: var(--sr-text);
  --bs-link-color: var(--sr-orange);
  --bs-link-color-rgb: 238, 111, 35;
  --bs-link-hover-color: var(--sr-orange);
  --bs-link-hover-color-rgb: 238, 111, 35;
}

/* ---------- Base ---------- */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--sr-text);
  background: #fff;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; font-weight: 500; }
h1 { font-size: 45px; }
h2 { font-size: 35px; }
h3 { font-size: 26px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }

a { color: var(--sr-orange); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus, a:active { color: var(--sr-orange); }

img { max-width: 100%; height: auto; }

/* The original page-builder grid used 30px gutters (15px column padding) */
.site-main .container,
.site-main .row { --bs-gutter-x: 30px; }

/* The original page builder capped containers at 1140px */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1140px; }
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--sr-header-height);
  padding: 0 15%;
  background: #fff;
  z-index: 999;
  transition: box-shadow 300ms ease-in-out;
}
.site-header.is-sticky {
  position: fixed;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .10);
}
/* Reserve space so content doesn't jump when the header becomes fixed */
.site-header.is-sticky + .site-main { padding-top: var(--sr-header-height); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header__logo { display: inline-flex; align-items: center; height: var(--sr-header-height); }
.site-header__logo img { height: 50px; width: auto; }

@media (max-width: 1199.98px) { .site-header { padding: 0 5%; } }
@media (max-width: 991.98px) {
  .site-header { padding: 0 15px; }
  .site-header__logo img { height: auto; max-height: 50px; }
}

/* ---------- Desktop mega-menu ---------- */
.main-nav { display: flex; list-style: none; margin: 0; padding: 0; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: inline-block;
  padding: 0 15px;
  line-height: 35px;
  font-size: 14px;
  color: var(--sr-muted);
}
.main-nav > li > a:hover,
.main-nav > li:hover > a,
.main-nav > li > a:focus-visible { color: var(--sr-orange-dark); }
.main-nav > li.is-active > a { color: var(--sr-orange); font-weight: 500; }

.main-nav .has-children > a::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f107"; /* angle-down */
  margin-left: 7px;
}
.main-nav .dropdown-panel .has-children > a::after { content: "\f105"; float: right; } /* angle-right */

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  margin: 0;
  padding: 20px;
  list-style: none;
  background: #fff;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
  z-index: 10;
  display: none;
}
.dropdown-panel--sub { top: -20px; left: 100%; box-shadow: 0 0 5px rgba(0, 0, 0, .2); }
.dropdown-panel--sub.dropdown-panel--left { left: auto; right: 100%; }
.dropdown-panel li { position: relative; }
.dropdown-panel a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1;
  color: var(--sr-muted);
}
.dropdown-panel a:hover, .dropdown-panel .is-active > a { color: var(--sr-orange); }

.main-nav li:hover > .dropdown-panel,
.main-nav li:focus-within > .dropdown-panel { display: block; animation: srFadeInUp 400ms ease-in; }

@keyframes srFadeInUp {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Mobile off-canvas menu (Bootstrap offcanvas) ---------- */
.menu-toggle {
  border: 0;
  background: none;
  padding: 0;
  font-size: 20px;
  line-height: var(--sr-header-height);
  color: var(--sr-purple);
}
.menu-toggle:hover { color: var(--sr-orange); }

.mobile-menu.offcanvas { width: 300px; background: var(--sr-purple); color: #ecf0f5; }
.mobile-menu .offcanvas-header { justify-content: flex-end; padding: 15px; }
.mobile-menu .btn-close-round {
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: #333; color: #fff;
  font-size: 14px; line-height: 24px;
}
.mobile-menu .btn-close-round:hover { background: #666; }
.mobile-menu .offcanvas-body { padding: 0 30px 30px; }
.mobile-nav, .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav ul { padding-left: 15px; }
.mobile-nav li { position: relative; }
.mobile-nav a, .mobile-nav .mobile-nav__label {
  display: block;
  padding: 5px 30px 5px 10px;
  font-size: 1rem;
  color: #ecf0f5;
}
.mobile-nav ul a { font-size: .875rem; color: #c7c7c7; }
.mobile-nav a:hover, .mobile-nav .is-active > a { color: var(--sr-orange); }
.mobile-nav__toggle {
  position: absolute;
  top: 2px; right: 0;
  border: 0; background: none;
  color: #ecf0f5;
  padding: 3px 6px;
}
.mobile-nav__toggle .fa-solid::before { content: "\f055"; } /* circle-plus */
.mobile-nav__toggle[aria-expanded="true"] .fa-solid::before { content: "\f056"; } /* circle-minus */

/* ---------- Footer ---------- */
.site-footer { background: var(--sr-footer-bg); color: var(--sr-footer-text); font-size: 14px; }
.site-footer a { color: var(--sr-footer-link); }
.site-footer a:hover { color: #fff; }
.site-footer__top { padding: 60px 0 30px; line-height: 1.6; }
.site-footer__title { font-size: 18px; font-weight: 500; margin: 0 0 30px; color: var(--sr-footer-text); }
.site-footer__links { list-style: none; padding: 0; margin: 0 0 30px; }
.site-footer__links li { margin-bottom: 15px; }
.site-footer__links li:last-child { margin-bottom: 0; }
.site-footer__bottom .container > .row { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer__bottom a { color: #fff; }
.site-footer__legal { text-align: right; }
@media (max-width: 991.98px) { .site-footer__legal { text-align: left; margin-top: 10px; } }

/* ---------- Scroll-to-top ---------- */
.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 36px; height: 36px;
  border-radius: 3px;
  background: #333;
  color: #fff;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; }
.scroll-top:hover, .scroll-top:focus { background: #444; color: #fff; }

/* ==========================================================================
   Reusable content components
   ========================================================================== */

/* ---------- Sections ---------- */
.sr-section {
  position: relative;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.sr-section > .container,
.sr-section > .container-fluid { position: relative; z-index: 3; }
/* Color/gradient overlay that sits between the background image and content */
.sr-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Fixed ("parallax") backgrounds — disabled on touch devices where it's unsupported */
.bg-fixed { background-attachment: fixed; }
@media (hover: none), (max-width: 991.98px) { .bg-fixed { background-attachment: scroll; } }

/* SVG shape dividers at the top/bottom edge of a section */
.sr-shape { position: absolute; left: 0; width: 100%; line-height: 0; overflow: hidden; z-index: 2; }
.sr-shape--top { top: -1px; }
.sr-shape--bottom { bottom: -1px; }
.sr-shape svg { display: block; position: relative; left: 50%; width: 100%; transform: translateX(-50%); }
.sr-shape--bottom svg { transform: rotateX(180deg) translateX(-50%); }
.sr-shape--top.sr-shape--invert svg { transform: rotateX(180deg) translateX(-50%); }
.sr-shape--bottom.sr-shape--invert svg { transform: translateX(-50%); }
.sr-shape--flip.sr-shape--top svg { transform: rotateY(180deg) translateX(50%); }
.sr-shape--flip.sr-shape--bottom svg { transform: rotate(180deg) translateX(50%); }

/* ---------- Buttons ---------- */
.btn-sr {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sr-orange);
  --bs-btn-border-color: var(--sr-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sr-orange-hover);
  --bs-btn-hover-border-color: var(--sr-orange-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sr-orange-hover);
  --bs-btn-active-border-color: var(--sr-orange-hover);
  --bs-btn-focus-shadow-rgb: 238, 111, 35;
}
.btn-sr-purple {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sr-purple);
  --bs-btn-border-color: var(--sr-purple);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sr-orange);
  --bs-btn-hover-border-color: var(--sr-orange);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sr-orange);
  --bs-btn-active-border-color: var(--sr-orange);
}
.btn-outline-sr {
  --bs-btn-color: var(--sr-orange);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--sr-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sr-orange);
  --bs-btn-hover-border-color: var(--sr-orange);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sr-orange);
  --bs-btn-active-border-color: var(--sr-orange);
}
.btn-outline-light-sr {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--sr-orange);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--sr-orange);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}
/* Extra-large size used by the original "xlg" buttons */
.btn-xl { --bs-btn-padding-y: 1.25rem; --bs-btn-padding-x: 2.5rem; --bs-btn-font-size: 1.25rem; }
.btn i, .btn .fa-solid, .btn .fa-regular, .btn .fa-brands { margin-right: .4em; }

/* ---------- Feature box (icon + title + text) ---------- */
.feature-box { text-align: center; }
.feature-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 48px;
  color: var(--sr-orange);
}
.feature-box__title { margin-bottom: 10px; }
.feature-box--left { text-align: left; display: flex; gap: 20px; }
.feature-box--left .feature-box__icon { flex: 0 0 auto; margin-bottom: 0; }

/* ---------- Animated counter ---------- */
.counter { text-align: center; }
.counter__number { display: block; font-size: 48px; font-weight: 700; line-height: 1.2; color: var(--sr-orange); }
.counter__label { display: block; margin-top: 8px; }

/* ---------- Flip box ---------- */
.flipbox { perspective: 1000px; min-height: 300px; }
.flipbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transition: transform .8s;
  transform-style: preserve-3d;
}
.flipbox:hover .flipbox__inner,
.flipbox:focus-within .flipbox__inner { transform: rotateY(180deg); }
.flipbox--vertical:hover .flipbox__inner,
.flipbox--vertical:focus-within .flipbox__inner { transform: rotateX(180deg); }
.flipbox__front, .flipbox__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
}
.flipbox__back { transform: rotateY(180deg); }
.flipbox--vertical .flipbox__back { transform: rotateX(180deg); }

/* ---------- Rotating-word heading ---------- */
.rotating-words { display: inline-block; position: relative; text-align: left; vertical-align: top; }
.rotating-words__word {
  display: inline-block;
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .5s, transform .5s;
}
.rotating-words__word.is-visible { position: relative; opacity: 1; transform: scale(1); }

/* ---------- Image gallery + lightbox ---------- */
.sr-gallery { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sr-gallery a { display: block; overflow: hidden; }
.sr-gallery img { display: block; transition: transform .3s ease; }
.sr-gallery a:hover img { transform: scale(1.05); }

.sr-lightbox .modal-content { background: transparent; border: 0; }
.sr-lightbox .modal-body { position: relative; padding: 0; text-align: center; }
.sr-lightbox img { max-height: 85vh; width: auto; }
.sr-lightbox__close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 28px; background: none; border: 0; }
.sr-lightbox__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff;
}
.sr-lightbox__nav--prev { left: 10px; }
.sr-lightbox__nav--next { right: 10px; }
.sr-lightbox__counter { color: #ccc; font-size: 12px; margin-top: 8px; }

/* ---------- Video embeds + video modal ---------- */
.sr-video-modal .modal-content { background: #000; border: 0; }
.sr-video-modal .btn-close { position: absolute; top: -36px; right: 0; filter: invert(1); opacity: 1; }

/* Round "play" trigger used for video popups */
.play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--sr-orange);
  color: #fff;
  font-size: 28px;
  transition: transform .3s ease;
}
.play-button:hover { color: #fff; transform: scale(1.08); }
.play-button--pulse { box-shadow: 0 0 0 15px rgb(236 96 0 / 80%), 0 0 0 30px rgb(236 96 0 / 60%), 0 0 0 45px rgb(236 96 0 / 40%); }

/* ---------- "¿Listo para mejorar…?" advisor call-to-action ----------
   Same block at the bottom of most pages: desaturated photo, purple panel on
   the right, round orange button. Use .cta-advisor--team for the team photo. */
.cta-advisor {
  background-color: #fff;
  background-image: url('../img/shared/cta-asesor-bg.jpg');
}
.cta-advisor--team { background-image: url('../img/shared/cta-asesor-equipo-bg.jpg'); }
.cta-advisor__overlay { background-color: #fff; mix-blend-mode: hue; } /* desaturates the photo */
.cta-advisor__panel { padding: 100px 30px; background-color: rgba(44, 33, 59, .8); text-align: center; }
.cta-advisor__title {
  width: 85%;
  margin: 0 auto 20px;
  font-size: 35px;
  line-height: 40px;
  font-weight: 700;
  color: #f1f1f1;
}
.cta-advisor__highlight { color: #ff732d; }
.cta-advisor__actions { margin-bottom: 20px; }
.cta-advisor__btn {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 20px;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sr-orange-dark);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #772b78;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #772b78;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: transparent;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .cta-advisor { padding: 15px 0 38px; }
  .cta-advisor__panel { padding: 40px 30px 30px; }
  .cta-advisor__title { width: 70%; font-size: 30px; line-height: 35px; }
}
@media (max-width: 767.98px) {
  .cta-advisor { padding: 44px 0; }
  .cta-advisor__panel { padding: 30px; }
  .cta-advisor__title { width: 90%; margin-bottom: 10px; font-size: 25px; line-height: 30px; }
  .cta-advisor__actions { margin-bottom: 0; }
  .cta-advisor__btn { --bs-btn-padding-y: 8px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 16px; }
}

/* ---------- HubSpot forms inside modals ---------- */
.sr-form-modal .modal-content { border: 0; border-radius: 8px; }
.sr-form-modal .modal-body { padding: 30px; }
.hs-form-target { min-height: 120px; }

/* ---------- Scroll-reveal (animate.css) ---------- */
/* Hidden until scrolled into view; JS adds animate.css classes. */
.js [data-animate] { opacity: 0; }
.js [data-animate].animate__animated { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js [data-animate] { opacity: 1; }
  .rotating-words__word { transition: none; }
  .flipbox__inner { transition: none; }
}