/* =========================================================
   APEX RENOVATION TEAM
   GLOBAL STYLES
========================================================= */

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #F6F2EC;
  color: #2E241D;
  font-family: 'Manrope', Arial, sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}


/* =========================================================
   HEADER
========================================================= */

.apex-site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5000;

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

  background:
    linear-gradient(
      180deg,
      rgba(22, 17, 13, 0.52),
      rgba(22, 17, 13, 0.08)
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.apex-nav-shell {
  width: min(1220px, calc(100% - 48px));
  height: 96px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 34px;
}

.apex-logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.apex-logo-link img {
  display: block;
  width: 255px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.apex-main-nav {
  display: flex;
  align-items: center;
  gap: 29px;
  margin-left: auto;
}

.apex-main-nav > a,
.apex-nav-dropdown > button {
  position: relative;

  color: #FFFFFF;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  background: none;
  border: 0;

  padding: 37px 0 31px;

  cursor: pointer;
}

.apex-main-nav > a::after,
.apex-nav-dropdown > button::after {
  content: '';

  position: absolute;

  left: 0;
  right: 100%;
  bottom: 26px;

  height: 1px;

  background: #C38A45;

  transition: right 0.25s ease;
}

.apex-main-nav > a:hover::after,
.apex-main-nav > a.active::after,
.apex-nav-dropdown > button:hover::after {
  right: 0;
}

.apex-main-nav > a:hover,
.apex-nav-dropdown > button:hover {
  color: #E6CFAC;
}


/* =========================================================
   NAV DROPDOWN
========================================================= */

.apex-nav-dropdown {
  position: relative;
}

.apex-nav-dropdown > button i {
  margin-left: 8px;
  font-size: 9px;
}

.apex-dropdown-menu {
  position: absolute;

  top: 72px;
  left: -18px;

  min-width: 215px;

  padding: 10px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;

  background: rgba(34, 26, 20, 0.98);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);

  opacity: 0;
  visibility: hidden;

  transform: translateY(8px);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;

  z-index: 5100;
}

.apex-dropdown-menu::before {
  content: '';

  position: absolute;

  left: 0;
  right: 0;
  top: -14px;

  height: 14px;
}

.apex-nav-dropdown:hover .apex-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.apex-dropdown-menu a {
  display: block;

  padding: 11px 12px;

  border-radius: 9px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 12px;
}

.apex-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
}


/* =========================================================
   HEADER TALK BUTTON
========================================================= */

.apex-header-talk {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 13px 27px;

  border: 1px solid #B67823;
  border-radius: 6px;

  color: #FFFFFF;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.apex-header-talk::after {
  display: none;
}

.apex-header-talk:hover {
  background: #B67823;
  color: #FFFFFF;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.apex-menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.12);

  color: #FFFFFF;

  font-family: inherit;
  font-size: 18px;

  cursor: pointer;
}

.apex-mobile-menu {
  display: none;

  max-height: calc(100vh - 110px);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================================================
   FLOATING WEB CALL
   DESKTOP
========================================================= */

.apex-sticky-talk {
  position: fixed;

  top: 50%;
  right: 0;

  display: flex;
  align-items: center;

  transform: translateY(-50%);

  border: 1px solid rgba(205, 181, 143, 0.48);
  border-right: 0;
  border-radius: 20px 0 0 20px;

  overflow: hidden;

  background: rgba(38, 28, 22, 0.96);

  box-shadow: 0 18px 45px rgba(33, 25, 19, 0.30);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color: #FFFFFF;

  z-index: 4500;
}

.apex-sticky-talk .icon {
  width: 56px;
  height: 58px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  background: #B18A5B;

  font-size: 17px;
}

.apex-sticky-talk .copy {
  padding: 10px 17px 10px 14px;
}

.apex-sticky-talk small {
  display: block;

  color: #DCC5A4;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.apex-sticky-talk strong {
  display: block;

  margin-top: 4px;

  color: #FFFFFF;

  font-size: 11px;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}


/* =========================================================
   FOOTER
========================================================= */

.apex-site-footer {
  background: #5B493B;
  color: #FFFFFF;

  padding: 72px 0 28px;
}

.apex-footer-shell {
  width: min(1220px, calc(100% - 48px));
  margin: 0 auto;
}

.apex-footer-main {
  display: grid;

  grid-template-columns: 1.1fr 0.8fr 0.8fr;

  gap: 72px;

  padding-bottom: 54px;
}

.apex-footer-logo {
  width: 235px;
  max-width: 100%;

  filter: brightness(0) invert(1);

  opacity: 0.96;
}

.apex-footer-brand p {
  max-width: 320px;

  margin: 20px 0 0;

  color: rgba(255, 255, 255, 0.78);

  font-size: 14px;
  line-height: 1.55;
}

.apex-footer-title {
  margin-bottom: 18px;

  font-size: 13px;
  font-weight: 700;
}

.apex-footer-contact a {
  display: block;

  margin: 0 0 11px;

  color: #FFFFFF;

  font-size: 15px;
}

.apex-footer-nav a {
  display: block;

  margin: 0 0 10px;

  color: rgba(255, 255, 255, 0.76);

  font-size: 14px;
}

.apex-footer-nav a:hover,
.apex-footer-contact a:hover {
  color: #E7C89D;
}

.apex-socials {
  display: flex;

  gap: 18px;

  margin-top: 26px;
}

.apex-socials a {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;

  color: #FFFFFF;

  font-size: 16px;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.apex-socials a:hover {
  background: #FFFFFF;
  color: #5B493B;
}

.apex-footer-bottom {
  padding-top: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.12);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 12px;
}


/* =========================================================
   GLOBAL WEB CALL MODAL
========================================================= */

.apex-global-call-modal {
  position: fixed;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    radial-gradient(
      circle at top,
      rgba(167, 121, 89, 0.18),
      transparent 35%
    ),
    rgba(16, 14, 12, 0.78);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  z-index: 2147483647;
}

.apex-global-call-modal.apex-open {
  display: flex;
}

.apex-global-call-shell {
  position: relative;

  width: min(960px, 100%);

  min-height: 560px;
  max-height: 88vh;

  display: grid;

  grid-template-columns: 340px 1fr;

  overflow: hidden;

  border-radius: 22px;

  background: #F6F1EA;

  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
}

.apex-global-call-side {
  position: relative;

  padding: 42px 34px 34px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-right: 1px solid rgba(92, 63, 45, 0.10);

  background:
    linear-gradient(
      160deg,
      #EFE4D6,
      #E6D6C4
    );
}

.apex-global-call-eyebrow {
  margin: 0 0 16px;

  color: #8A5D45;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.apex-global-call-title {
  margin: 0;

  color: #2C2723;

  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 44px;
  font-weight: 500;

  line-height: 1.02;
}

.apex-global-call-title span {
  color: #9A692E;
}

.apex-global-call-text {
  margin: 18px 0 0;

  color: #5F564F;

  font-size: 14px;
  line-height: 1.7;
}

.apex-global-call-points {
  margin: 24px 0 0;
  padding: 0;

  list-style: none;
}

.apex-global-call-points li {
  position: relative;

  margin: 0 0 11px;

  padding-left: 25px;

  color: #665D56;

  font-size: 13px;
}

.apex-global-call-points li::before {
  content: '✓';

  position: absolute;

  top: 0;
  left: 0;

  color: #85593F;

  font-weight: 700;
}

.apex-global-call-main {
  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      180deg,
      #F8F5F1,
      #F3EDE6
    );
}

.apex-global-call-frame-wrap {
  width: 100%;
  max-width: 520px;

  height: min(620px, 74vh);

  overflow: hidden;

  border-radius: 20px;

  background: #FFFFFF;

  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.16);
}

.apex-global-call-frame-top {
  height: 54px;

  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  background: #FBFAF8;

  font-size: 12px;
}

.apex-global-call-status {
  display: flex;
  align-items: center;

  gap: 7px;

  color: #6E645C;
}

.apex-global-call-status::before {
  content: '';

  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #8DBE81;
}

.apex-global-call-frame {
  display: block;

  width: 100%;
  height: calc(100% - 54px);

  border: 0;

  background: #FFFFFF;
}

.apex-global-call-close {
  position: absolute;

  top: 14px;
  right: 14px;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;

  background: rgba(40, 35, 32, 0.90);

  color: #FFFFFF;

  font-family: inherit;
  font-size: 25px;

  cursor: pointer;

  z-index: 20;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.apex-form-quick-links {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}

.apex-form-quick-links a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: #73593C;

  font-size: 11px;
}

.apex-form-quick-links a:hover {
  color: #9A692E;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .apex-main-nav {
    gap: 18px;
  }

  .apex-main-nav > a,
  .apex-nav-dropdown > button {
    font-size: 12px;
  }

  .apex-logo-link img {
    width: 220px;
  }

  .apex-header-talk {
    padding: 12px 18px;
  }
}


/* =========================================================
   MOBILE NAVIGATION + WEB CALL
========================================================= */

@media (max-width: 900px) {

  .apex-main-nav {
    display: none;
  }

  .apex-menu-toggle {
    display: block;
  }

  .apex-nav-shell {
    height: 82px;
  }

  .apex-logo-link img {
    width: 210px;
  }

  .apex-mobile-menu {
    position: absolute;

    top: 82px;
    left: 18px;
    right: 18px;

    padding: 16px;

    max-height: calc(100vh - 100px);

    overflow-y: auto;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    background: rgba(32, 24, 18, 0.98);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);

    z-index: 5200;
  }

  .apex-mobile-menu.apex-mobile-open {
    display: block;
  }

  .apex-mobile-menu a {
    display: block;

    padding: 13px 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;

    color: #FFFFFF;

    font-size: 13px;
  }

  .apex-mobile-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #E6CFAC;
  }

  .apex-mobile-menu a:last-child {
    border-bottom: 0;
  }


  /* =====================================================
     WEB CALL MOBILE
     Queda aproximadamente a mitad de pantalla.
  ===================================================== */

  .apex-sticky-talk,
  .apex-floating-call {
    position: fixed;

    top: 50vh;
    right: 0;
    bottom: auto;
    left: auto;

    margin: 0;

    transform: translateY(-50%);

    z-index: 4900;
  }

  .apex-sticky-talk {
    display: flex;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 700px) {

  .apex-nav-shell,
  .apex-footer-shell {
    width: min(1220px, calc(100% - 28px));
  }

  .apex-logo-link img {
    width: 188px;
  }

  .apex-footer-main {
    grid-template-columns: 1fr;

    gap: 34px;
  }

  .apex-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .apex-global-call-shell {
    width: 100%;

    min-height: 0;
    max-height: 94vh;

    grid-template-columns: 1fr;

    overflow-y: auto;
  }

  .apex-global-call-side {
    padding: 30px 22px 20px;

    border-right: 0;
    border-bottom: 1px solid rgba(92, 63, 45, 0.10);
  }

  .apex-global-call-main {
    padding: 14px;
  }

  .apex-global-call-frame-wrap {
    height: 58vh;
  }

  .apex-global-call-title {
    font-size: 34px;
  }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 480px) {

  .apex-nav-shell {
    width: calc(100% - 24px);
  }

  .apex-logo-link img {
    width: 170px;
  }

  .apex-menu-toggle {
    width: 42px;
    height: 42px;
  }

  .apex-mobile-menu {
    left: 12px;
    right: 12px;
  }

  .apex-global-call-modal {
    padding: 10px;
  }

  .apex-global-call-side {
    padding: 26px 18px 18px;
  }

  .apex-global-call-main {
    padding: 10px;
  }

  .apex-global-call-title {
    font-size: 31px;
  }
}






/** **************************** */



/* =========================================================
   APEX WEB CALL - MOBILE GLOBAL OVERRIDE
========================================================= */

@media (max-width: 900px) {

  html body a.apex-floating-call {
    position: fixed;
    top: 50vh;
    right: 14px;
    bottom: auto;
    left: auto;
    margin: 0;
    transform: translateY(-50%);
    z-index: 9000;
  }

  html body a.apex-floating-call:hover {
    transform: translateY(-50%);
  }

  html body a.apex-sticky-talk {
    position: fixed;
    top: 50vh;
    right: 0;
    bottom: auto;
    left: auto;
    margin: 0;
    transform: translateY(-50%);
    z-index: 9000;
  }

}



/**********************/
/* =====================================
   GLOBAL MOBILE RESPONSIVE
===================================== */

@media(max-width:768px){

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

  .shell,
  .page-shell,
  .container{
    width:calc(100% - 32px);
    margin:auto;
  }

  section{
    overflow:hidden;
  }

  h1{
    font-size:42px !important;
    line-height:1.05;
  }

  h2{
    font-size:34px !important;
  }

  p{
    font-size:15px;
    line-height:1.7;
  }

  .grid,
  .cards,
  .service-grid,
  .project-grid,
  .two-column,
  .content-grid{
    grid-template-columns:1fr !important;
  }

}



/* *********************************** / 


/* =========================================
   MOBILE MENU FIX
========================================= */

@media (max-width:900px){

  .apex-menu-toggle{
    display:block;
    cursor:pointer;
  }


  .apex-mobile-menu{
    display:none;
    position:absolute;

    top:82px;
    left:14px;
    right:14px;

    padding:16px;

    background:rgba(32,24,18,.98);

    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.30);

    z-index:99999;
  }


  .apex-mobile-menu.apex-mobile-open{
    display:block !important;
  }


  .apex-mobile-menu a{
    display:block;

    padding:14px 12px;

    color:#fff;

    font-size:14px;

    border-bottom:1px solid rgba(255,255,255,.08);
  }


  .apex-mobile-menu a:last-child{
    border-bottom:0;
  }

}


/******************/