@charset "UTF-8";
/*

@Author: Themezinho
@URL: http://www.themezinho.net

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


// Table of contents //

	01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	SCROLL DOWN
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES



*/
/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville:400|Poppins:300,400,600,800&subset=latin-ext");
/* BODY */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #313434;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

html {
  height: 100%;
}

/* CUSTOM ELEMENTS */
.overflow {
  overflow: hidden !important;
}

.no-margin {
  margin: 0 !important;
}

/* HTML ELEMENTS */
img {
  max-width: 100%;
}

/* LINKS */
a {
  color: #313434;
}

a {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: -100%;
  z-index: 10;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.transition-overlay * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.transition-overlay .layer {
  width: 10px;
  height: 100%;
  float: left;
  background: #2D4254;
  transition-delay: 0.4s;
}
.transition-overlay.active {
  top: 0;
}
.transition-overlay.active .layer {
  width: 100%;
}

/* ODOMETER */
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0;
}

/* PRELOADER */
.preloader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  overflow: hidden;
  background: #426481;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #2D4254;
  z-index: 2;
}
.preloader .inner {
  margin: 0;
  position: relative;
  z-index: 3;
}
.preloader figure {
  display: block;
  margin: 0;
}
.preloader figure img {
  height: 110px;
}
.preloader .typewriter {
  height: 26px;
  line-height: 26px;
  display: inline-block;
  transform: translateY(-70px);
  color: #fff;
  font-family: "Libre Baskerville", serif;
}
.preloader .typewriter #typewriter-text {
  float: left;
  font-size: 20px;
  margin-left: 5px;
  margin-top: -2px;
  margin-right: 3px;
}
.preloader .typewriter #typewriter-suffix {
  width: 2px;
  height: 22px;
  display: inline-block;
  background: #fff;
  text-indent: -1000px;
  overflow: hidden;
}

.page-loaded {
  overflow: inherit;
}
.page-loaded .preloader {
  left: -100%;
  transition-delay: 0.6s;
}
.page-loaded .preloader .layer {
  bottom: -100%;
  transition-delay: 0.2s;
}
.page-loaded .preloader .inner {
  transform: translateY(30px);
  opacity: 0;
}
.page-loaded .header .social-media {
  transform: translateY(0);
  opacity: 1;
}
.page-loaded .navbar {
  transform: translateY(0);
}
.page-loaded .soundbar {
  transform: translateX(0);
}

/* NAVIGATION MENU */
.navigation-menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  left: 0;
  top: -100%;
  z-index: 8;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation-menu * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation-menu .nav-bg {
  width: 10px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #83A3BF;
  transition-delay: 0.4s;
}
.navigation-menu .nav-bg2 {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #2D4254;
  transition-delay: 0.8s;
}
.navigation-menu .inner {
  position: relative;
  z-index: 2;
  padding: 0 40px;
}
.navigation-menu .inner address {
  float: left;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  font-size: 20px;
  transform: translateX(-200%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  margin: 0;
  height: 170px;
  position: absolute;
  top: 50%;
  margin-top: -85px;
}
.navigation-menu .inner address span {
  font-family: "Poppins", sans-serif;
  display: block;
  font-size: 2vw;
  font-weight: 800;
  margin-bottom: 20px;
}
.navigation-menu .inner ul {
  width: 50%;
  float: right;
  margin: 0;
  padding: 0;
}
.navigation-menu .inner ul li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.navigation-menu .inner ul li:hover ul {
  max-height: 500px;
  transition: max-height 0.45s ease-in;
}
.navigation-menu .inner ul li a {
  float: right;
  font-size: 4vw;
  color: #fff;
  font-weight: 800;
  transform: translateY(200%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  position: relative;
}
.navigation-menu .inner ul li a:hover,
.navigation-menu .inner ul li a:focus {
  text-decoration: none;
  color: #D6AB60;                              /* ← DORADO en hover (cámbialo si quieres otro tono) */
}
.navigation-menu .inner ul li a:hover .pre,
.navigation-menu .inner ul li a:focus .pre {
  color: #D6AB60;                              /* ← que "CAPITAL" también acompañe */
}

/* Fix: el template aplica transition-delay a "all" (ver .navigation-menu.open ul li:nth-child(N) a),
   lo que retrasa el cambio de color en hover 0.8–1s. Limitamos la transición solo a `transform`
   (necesaria para la entrada escalonada del menú); el color cambia al instante en hover. */
.navigation-menu .inner ul li a,
.navigation-menu.open ul li a,
.navigation-menu.open ul li:nth-child(1) a,
.navigation-menu.open ul li:nth-child(2) a,
.navigation-menu.open ul li:nth-child(3) a,
.navigation-menu.open ul li:nth-child(4) a,
.navigation-menu.open ul li:nth-child(5) a {
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  transition-property: transform;
}
.navigation-menu .inner ul li a:before {
  display: none;                         /* ← raya turquesa original del template: desactivada */
}
.navigation-menu .inner ul li ul {
  max-height: 0;
  width: 100%;
  transition: max-height 0.25s ease-out;
}
.navigation-menu .inner ul li ul li {
  display: block;
}
.navigation-menu .inner ul li ul li a {
  font-size: 26px;
}
.navigation-menu .inner ul li ul li a:before {
  height: 4px;
  bottom: 8px;
}
.navigation-menu.open {
  top: 0;
}
.navigation-menu.open .nav-bg {
  width: 100%;
}
.navigation-menu.open .nav-bg2 {
  width: 100%;
}
.navigation-menu.open address {
  transition-delay: 1s;
  transform: translateY(0);
}
.navigation-menu.open ul li {
  margin: 0;
}
.navigation-menu.open ul li:nth-child(1) a {
  transition-delay: 0.8s;
}
.navigation-menu.open ul li:nth-child(2) a {
  transition-delay: 0.85s;
}
.navigation-menu.open ul li:nth-child(3) a {
  transition-delay: 0.9s;
}
.navigation-menu.open ul li:nth-child(4) a {
  transition-delay: 0.95s;
}
.navigation-menu.open ul li:nth-child(5) a {
  transition-delay: 1s;
}
.navigation-menu.open ul li a {
  transform: translateY(0);
}

/* SANDWICH BUTTON */
.sandwich-btn {
  width: 22px;
  height: 22px;
  float: left;
  position: relative;
  cursor: pointer;
}
.sandwich-btn span {
  display: block;
  height: 2px;
  width: 18px;
  background: #D6AB60;
  opacity: 1;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
  top: 0;
}
.sandwich-btn span:nth-child(2) {
  top: 8px;
}
.sandwich-btn.open span:nth-child(1) {
  top: 4px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
  top: 4px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* EQUALIZER */
.equalizer {
  width: 46px;
  height: 46px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: rotate(90deg);
}

.equalizer span {
  background: #fff;
  width: 2px;
  height: 2px;
  top: 50%;
  bottom: 0;
  left: 0%;
  transform: translateY(-50%);
  position: absolute;
  transition: height 0.2s linear;
}

.equalizer span:nth-child(1) {
  margin-left: 4px;
}

.equalizer span:nth-child(2) {
  margin-left: 8px;
}

.equalizer span:nth-child(4) {
  margin-left: 12px;
}

.equalizer span:nth-child(5) {
  margin-left: 16px;
}

.equalizer span:nth-child(6) {
  margin-left: 20px;
}

.equalizer.paused span {
  height: 3px !important;
}

/* HEADER */
.header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.header .social-media {
  position: absolute;
  left: 44px;
  bottom: 90px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  margin: 0;
  padding: 0;
  z-index: 2;
  transform: translateY(100%);
  opacity: 0;
  transition-delay: 1.2s;
}
.header .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.header .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.header .social-media li a:hover {
  text-decoration: none;
}
.header .social-media li a:hover:before {
  width: 100%;
}
.header .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* NAVBAR */
.navbar {
  width: 100%;
  position: fixed;                       /* ← fixed = siempre visible al hacer scroll */
  left: 0;
  top: 0;
  z-index: 99;                           /* ← por encima del contenido */
  padding: 30px 40px;
  font-family: "Libre Baskerville", serif;
  transform: translateY(-100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.8s;
}
.navbar .logo {
  margin-right: 35px;
}
.navbar .logo a {
  float: left;
}
.navbar .logo a img {
  height: 50px;
}
.navbar .sandwich-nav {
  margin-right: 0;
}
.navbar .sandwich-nav .sandwich-text {
  float: left;
  height: 46px;
  overflow: hidden;
}
.navbar .sandwich-nav .sandwich-text.move-up b {
  transform: translateY(-50%);
}
.navbar .sandwich-nav .sandwich-text b {
  float: left;
  font-weight: 400;
  line-height: 46px;
  color: #D6AB60;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.navbar .sandwich-nav .sandwich-btn {
  float: left;
  margin-left: 10px;
  margin-top: 18px;
}

/* SOUNDBAR */
.soundbar {
  width: 46px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin-left: 40px;
  z-index: 2;
  transform: translateX(-150%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1s;
}
.soundbar .sound {
  width: 158px;
  float: left;
  text-align: center;
  transform: rotate(-90deg);
  margin-left: -52px;
}
.soundbar .sound .sound-title {
  float: left;
  line-height: 46px;
  color: #fff;
  font-family: "Libre Baskerville", serif;
}
.soundbar .sound .sound-text {
  height: 46px;
  line-height: 46px;
  float: left;
  overflow: hidden;
  text-align: center;
  font-family: "Libre Baskerville", serif;
}
.soundbar .sound .sound-text.move-up b {
  transform: translateY(-50%);
}
.soundbar .sound .sound-text b {
  width: 100%;
  display: block;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  font-weight: 400;
}
.soundbar .sound .equalizer {
  float: left;
  margin: 0 10px;
}
.soundbar .sound .equalizer * {
  transition-delay: 0s;
}
.soundbar .sound .equalizer .holder {
  width: 23px;
  height: 20px;
  float: left;
  margin-left: 10px;
  position: relative;
}

/* SLIDER */
.header {
  width: 100%;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
}
.header:before {
  content: "";
  width: 60%;
  height: 40px;
  background: #D6AB60;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.header:after {
  content: "";
  width: 60%;
  height: 70px;
  background: #426481;
  position: absolute;
  left: 40px;
  bottom: 0;
  z-index: 2;
}
.header h5 {
  font-size: 36px;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0;
  position: relative;
}
.header h5:before {
  content: "";
  width: 30px;
  height: 3px;
  background: #fff;
  float: left;
  margin-top: 19px;
  margin-right: 6px;
  margin-left: -18px;
}
.header h5 span {
  position: relative;
}
.header h5 span:after {
  content: "";
  width: 100%;
  height: 7px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: -1;
}
.header h2 {
  font-size: 8vw;
  color: #fff;
  font-weight: 800;
  margin-bottom: 40px;
  text-transform: uppercase;
}
.header .btn-ghost {
  width: 180px;
  height: 54px;
  line-height: 52px;
  display: inline-block;
  border-radius: 54px;
  border-bottom: 4px solid rgba(0, 0, 0, 0.2);
  background: url(../images/btn-bg.jpg);
  background-size: cover;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
.header .btn-ghost * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .btn-ghost span {
  position: relative;
  display: inline-block;
}
.header .btn-ghost span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
}
.header .btn-ghost span:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.header .btn-ghost:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.header .btn-ghost:hover {
  text-decoration: none;
}
.header .btn-play {
  color: #fff;
  position: relative;
  z-index: 2;
}
.header .btn-play img {
  height: 50px;
}
.header .video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.header .video-bg video {
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.header .video-bg .container {
  position: relative;
  z-index: 2;
}
.header .swiper-carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.header .swiper-carousel * {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.header .swiper-carousel .swiper-button-prev {
  width: 20%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  cursor: url("../images/arrow-left.png"), auto;
}
.header .swiper-carousel .swiper-button-next {
  width: 20%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  cursor: url("../images/arrow-right.png"), auto;
}
.header .swiper-carousel .swiper-slide {
  height: 100%;
  display: flex;
  background: #eee;
  align-items: center;
  justify-content: center;
  transition: all 200ms linear;
  background-size: cover;
}
.header .swiper-carousel .swiper-slide:after {
  content: "";
  width: 100%;
  height: 100%;
  background: #313434;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .swiper-carousel .swiper-slide .inner {
  opacity: 0;
  padding: 0 5vw;
  position: relative;
  z-index: 2;
  transform: translateY(50px);
}
.header .swiper-carousel .swiper-slide .inner h2 {
  font-size: 6vw;
}
.header .swiper-carousel .swiper-slide-active {
  margin: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.header .swiper-carousel .swiper-slide-active:after {
  content: "";
  opacity: 0;
}
.header .swiper-carousel .swiper-slide-active .inner {
  opacity: 1;
  transform: translateY(0);
}
.header .swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.header .swiper-container .swiper-slide {
  overflow: hidden;
}
.header .swiper-container .swiper-button-next {
  width: auto;
  height: auto;
  background: none;
  right: 33px;
  font-weight: 800;
  color: #fff;
  transform: rotate(90deg);
  margin-top: 20px;
  overflow: hidden;
}
.header .swiper-container .swiper-button-next * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .swiper-container .swiper-button-next span {
  position: relative;
  display: inline-block;
}
.header .swiper-container .swiper-button-next span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
}
.header .swiper-container .swiper-button-next span:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.header .swiper-container .swiper-button-next:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.header .swiper-container .swiper-button-prev {
  width: auto;
  height: auto;
  background: none;
  left: auto;
  right: 33px;
  font-weight: 800;
  color: #fff;
  transform: rotate(90deg);
  margin-top: -40px;
  overflow: hidden;
}
.header .swiper-container .swiper-button-prev * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.header .swiper-container .swiper-button-prev span {
  position: relative;
  display: inline-block;
}
.header .swiper-container .swiper-button-prev span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
}
.header .swiper-container .swiper-button-prev span:before {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.header .swiper-container .swiper-button-prev:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}
.header .swiper-container .swiper-pagination-fraction {
  width: 100px;
  position: absolute;
  left: auto;
  right: 40px;
  bottom: 20px;
  color: #fff;
  text-align: right;
}
.header .swiper-container .swiper-pagination-fraction .swiper-pagination-current {
  font-size: 50px;
  font-weight: 800;
}
.header .swiper-container .swiper-pagination-fraction .swiper-pagination-current:before {
  content: "0";
}
.header .swiper-container .swiper-pagination-fraction .swiper-pagination-total {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.7;
}
.header .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  padding: 0 150px;
}
.header .slide-inner:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/hero-lines-bg.png) center;
  opacity: 0.2;
}

main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 100vh;
  background: #fff;
  position: relative;
}

/* PAGE HEADER */
.page-header {
  width: 100%;
  height: 100%;
  min-height: 560px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  background: url(../images/int-hero.jpg) center;
  background-size: cover;
}
.page-header .social-media {
  position: absolute;
  left: 140px;
  bottom: 30px;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", serif;
  z-index: 2;
}
.page-header .social-media li {
  float: left;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.page-header .social-media li a {
  float: left;
  color: #fff;
  position: relative;
}
.page-header .social-media li a:hover {
  text-decoration: none;
}
.page-header .social-media li a:hover:before {
  width: 100%;
}
.page-header .social-media li a:before {
  content: "";
  width: 0;
  height: 6px;
  background: #00bbcc;
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: -1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.page-header .inner-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.page-header .inner-content .inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  padding: 0 140px;
}
.page-header .inner-content .inner h2 {
  font-size: 8vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 2s0px;
}
.page-header .inner-content .inner h6 {
  font-size: 20px;
  color: #fff;
  display: block;
  font-family: "Libre Baskerville", serif;
}

/* WORKS */
.works {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 40px;
  padding-bottom: 20px;
  position: relative;
  z-index: 2;
}
.works .works-title {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0;
  margin-bottom: 80px;
}
.works .works-title h2 {
  font-size: 6vw;
  font-weight: 800;
  line-height: 1;
}
.works .works-title p {
  display: block;
  color: #8f999a;
  font-size: 22px;
  font-weight: 300;
  line-height: 34px;
  margin: 0;
  font-family: "Libre Baskerville", serif;
}
.works .works-grid {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.works .works-grid.two-cols li {
  width: 50%;
}
.works .works-grid li {
  width: 33.33333%;
  float: left;
  margin: 0;
  margin-bottom: 80px;
  padding: 0 2vw;
  list-style: none;
}
.works .works-grid li figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.works .works-grid li figure * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.works .works-grid li figure:hover a {
  transform: scale(0.95);
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.4);
}
.works .works-grid li figure:hover a img {
  transform: scale(1);
}
.works .works-grid li figure:hover figcaption {
  padding-left: 10px;
}
.works .works-grid li figure:hover figcaption span {
  height: 0;
}
.works .works-grid li figure a {
  float: left;
  overflow: hidden;
}
.works .works-grid li figure a img {
  width: 100%;
  float: left;
}
.works .works-grid li figure figcaption {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 30px;
}
.works .works-grid li figure figcaption span {
  width: 3px;
  height: 50px;
  background: #f03a37;
  position: absolute;
  left: 20px;
  top: -80%;
}
.works .works-grid li figure figcaption small {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  color: #8f999a;
  font-family: "Libre Baskerville", serif;
  font-size: 13px;
}
.works .works-grid li figure figcaption h3 {
  font-weight: 800;
}

/* WORKS SINGLE */
.works-single {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 40px;
  position: relative;
  z-index: 2;
}
.works-single .works-title {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 0;
  margin-bottom: 30px;
}
.works-single .works-title h2 {
  font-size: 6vw;
  font-weight: 800;
  line-height: 1;
}
.works-single .works-title p {
  display: block;
  color: #8f999a;
  font-size: 22px;
  font-weight: 300;
  line-height: 34px;
  margin-bottom: 50px;
  font-family: "Libre Baskerville", serif;
}
.works-single article {
  margin-bottom: 50px;
}
.works-single article h6 {
  font-weight: 600;
  text-transform: uppercase;
}
.works-single article p {
  margin: 0;
  font-size: 16px;
  font-family: "Libre Baskerville", serif;
  color: #8f999a;
}
.works-single ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
.works-single ul li {
  width: 33.3333%;
  float: left;
  margin: 0;
  padding: 2vw;
  list-style: none;
}
.works-single ul li.double {
  width: 50%;
}
.works-single ul li.full {
  width: 100%;
}

/* AWARDS */
.awards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: url(../images/bg-shape-pattern.jpg) center no-repeat;
  background-size: auto 150%;
}
.awards h4 {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 20px;
  margin-top: 20px;
  text-transform: uppercase;
}
.awards p {
  font-size: 18px;
  font-family: "Libre Baskerville", serif;
  line-height: 30px;
  color: #8f999a;
  padding-left: 10%;
}
.awards figure {
  width: 100%;
  float: left;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 5px;
}
.awards figure:after {
  content: "";
  width: 6px;
  height: 6px;
  background: #f03a37;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -3px;
  border-radius: 50%;
}
.awards figure img {
  height: 60px;
  display: inline-block;
}
.awards small {
  font-size: 18px;
  font-weight: 600;
  transform: translateY(-8px);
  display: inline-block;
}
.awards .odometer {
  font-weight: 800;
  font-size: 50px;
  margin-bottom: 20px;
}

/* SIDE CONTENT BLOCK */
.side-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-size: cover;
  background-attachment: fixed;
}
.side-content-block .inner {
  width: 50%;
  padding: 200px 0;
}
.side-content-block .inner .holder {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.side-content-block .inner .holder p {
  font-family: "Libre Baskerville", serif;
  font-size: 23px;
  line-height: 36px;
  margin-bottom: 44px;
}
.side-content-block .inner .holder h6 {
  font-weight: 800;
  margin-bottom: 5px;
  font-size: 20px;
  margin-bottom: 0;
}

/* ICON CONTENT BLOCK */
.icon-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #878d94;
  text-align: center;
}
.icon-content-block * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.icon-content-block .content-box {
  flex: 1;
  padding: 100px 2vw;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.icon-content-block .content-box:hover {
  background: rgba(0, 0, 0, 0.05);
}
.icon-content-block .content-box:last-child {
  border-right: none;
}
.icon-content-block .content-box figure {
  display: block;
  margin-bottom: 30px;
}
.icon-content-block .content-box figure img {
  height: 50px;
}
.icon-content-block .content-box h4 {
  font-family: "Libre Baskerville", serif;
  color: #fff;
  margin-bottom: 20px;
  font-size: 18px;
}
.icon-content-block .content-box p {
  margin-bottom: 20px;
  font-weight: 300;
  color: #fff;
  font-size: 16px;
  line-height: 27px;
}
.icon-content-block .content-box a {
  display: inline-block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.icon-content-block .content-box a img {
  width: 50px;
}
.icon-content-block .content-box a:hover {
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* CLIENTS */
.clients {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  text-align: center;
}
.clients * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.clients h2 {
  font-size: 6vw;
  font-weight: 800;
  margin-bottom: 50px;
}
.clients h6 {
  font-family: "Libre Baskerville", serif;
  font-size: 18px;
}
.clients ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0;
  padding: 0;
  position: relative;
}
.clients ul:before {
  content: "";
  width: 2px;
  height: 100%;
  background: #fff;
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 2;
}
.clients ul:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
}
.clients ul li {
  width: 33.3333%;
  margin: 0;
  margin-right: -1px;
  margin-bottom: -1px;
  padding: 15px 0;
  list-style: none;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.clients ul li:hover figure {
  opacity: 1;
}
.clients ul li figure {
  width: 100%;
  float: left;
  margin: 0;
  padding: 15px 30%;
  overflow: hidden;
  position: relative;
  opacity: 0.4;
}
.clients ul li figure img {
  width: 100%;
  float: left;
}
.clients ul li figure h6 {
  width: 100%;
  float: left;
  text-align: center;
  color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  height: 16px;
  font-weight: 800;
  font-size: 13px;
  opacity: 0;
}

/* TEXT CONTENT BLOCK */
.text-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.text-content-block h2 {
  font-size: 5vw;
  font-family: "Libre Baskerville", serif;
}
.text-content-block h4 {
  font-weight: 600;
  font-size: 3vw;
  margin-bottom: 50px;
}
.text-content-block p {
  font-size: 19px;
  line-height: 30px;
  color: #8f999a;
  font-family: "Libre Baskerville", serif;
  margin: 0;
}

/* SERVICES CONTENT BLOCK */
.services-content-block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: url(../images/bg-shape-pattern.jpg) center no-repeat;
  background-size: auto 100%;
}
.services-content-block .container {
  padding: 0 5%;
}
.services-content-block .content-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 10vh 0;
  background: #fff;
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.2);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.services-content-block .content-box:hover {
  transform: translateY(-20px);
  box-shadow: 5px 20px 50px 5px rgba(153, 153, 153, 0.4);
}
.services-content-block .content-box figure {
  width: 100%;
}
.services-content-block .content-box figure img {
  display: inline-block;
  height: 125px;
}
.services-content-block .content-box h4 {
  width: 100%;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 20px;
  background: url(../images/btn-bg.jpg) center;
  -webkit-background-clip: text;
  color: transparent;
  background-size: auto 100%;
}
.services-content-block .content-box ul {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Libre Baskerville", serif;
  color: #8f999a;
}
.services-content-block .content-box ul li {
  width: 100%;
  margin: 0;
  padding: 2px 0;
  list-style: none;
}

/* TEAM */
.team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: #dbe4e4;
}
.team * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.team ul {
  width: 100%;
  float: left;
  margin: 0;
  padding: 0;
}
.team ul li {
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #dbe4e4;
}
.team ul li:hover {
  transform: translateY(-40px);
}
.team ul li:hover .social-links {
  opacity: 1;
}
.team ul li:last-child {
  border-right: 0;
}
.team ul li:nth-child(2) {
  margin-top: 40px;
}
.team ul li:nth-child(4) {
  margin-top: 40px;
}
.team ul li figure {
  width: 100%;
  float: left;
  margin: 0;
  background: #fff;
}
.team ul li figure img {
  width: 100%;
  float: left;
}
.team ul li figure figcaption {
  width: 100%;
  float: left;
  padding: 15px;
  position: relative;
}
.team ul li figure figcaption h5 {
  font-weight: 600;
}
.team ul li figure figcaption .social-links {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 2;
  background: #fff;
  padding: 3px;
  opacity: 0;
  padding-left: 15px;
}
.team ul li figure figcaption .social-links a {
  float: left;
  margin-right: 10px;
}
.team ul li figure figcaption .social-links a:hover {
  color: #f03a37;
}
.team ul li figure figcaption small {
  display: block;
}

/* BLOG */
.blog {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0;
}
.blog .post {
  width: 100%;
  float: left;
  margin: 50px 0;
}
.blog .post .social-share {
  width: 100%;
  float: left;
  padding: 0 !important;
  margin-bottom: 40px;
}
.blog .post .social-share li {
  float: left;
  margin-right: 5px;
  padding: 0;
  list-style: none;
  text-align: center;
}
.blog .post .social-share li.facebook a {
  background: #475993;
}
.blog .post .social-share li.twitter a {
  background: #76a9ea;
}
.blog .post .social-share li.google-plus a {
  background: #f34a38;
}
.blog .post .social-share li.linkedin a {
  background: #0077b7;
}
.blog .post .social-share li.youtube a {
  background: #f61c0d;
}
.blog .post .social-share li a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  float: left;
  background: #f03a37;
  color: #fff;
  border: none;
  border-radius: 0;
}
.blog .post .post-image {
  width: 100%;
  display: block;
  margin-bottom: 0;
}
.blog .post .post-image img {
  width: 100%;
}
.blog .post .post-content {
  width: 100%;
  display: block;
  padding: 0 50px;
  font-size: 18px;
}
.blog .post .post-content h6 {
  font-weight: 300;
  line-height: 38px;
  font-size: 26px;
  margin-bottom: 30px;
}
.blog .post .post-content p {
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 20px;
}
.blog .post .post-content p:last-child {
  margin-bottom: 0;
}
.blog .post .post-content strong {
  font-weight: 600;
}
.blog .post .post-content figure {
  display: block;
  margin-bottom: 20px;
}
.blog .post .post-content blockquote {
  display: block;
  padding: 40px;
  margin-bottom: 40px;
  background: #f03a37;
  color: #fff;
  font-family: "Libre Baskerville", serif;
  position: relative;
}
.blog .post .post-content blockquote:before {
  content: "";
  font-family: fontawesome;
  color: #fff;
  font-size: 90px;
  position: absolute;
  left: 40px;
  top: 0;
  opacity: 0.1;
}
.blog .post .post-content blockquote:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: -20px;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #f03a37 transparent transparent transparent;
}
.blog .post .post-content blockquote h5 {
  font-weight: 800;
  font-family: Poppins;
  margin: 0;
}
.blog .post .post-content ul {
  padding-left: 20px;
}
.blog .post .post-content ul li {
  padding: 3px 0;
}
.blog .post .post-content .avatar {
  display: block;
  color: #8f999a;
  line-height: 50px;
  margin: 25px 0;
  font-size: 13px;
  font-weight: 600;
}
.blog .post .post-content .avatar img {
  height: 50px;
  float: left;
  margin-right: 10px;
  border-radius: 50%;
}
.blog .post .post-content .avatar a {
  color: #313434;
}
.blog .post .post-content .post-date {
  display: block;
  color: #8f999a;
  margin-bottom: 10px;
  font-family: "Libre Baskerville", serif;
  font-size: 16px;
}
.blog .post .post-content .post-title {
  display: block;
  font-size: 3vw;
  font-weight: 800;
  margin-bottom: 20px;
}
.blog .post .post-content .post-title a {
  float: left;
  color: #313434;
}
.blog .post .post-content .post-intro {
  display: block;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 30px;
}
.blog .post .post-content .post-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 2px;
}
.blog .post .post-content .post-link:hover {
  text-decoration: none;
  color: #f03a37;
}
.blog .post .post-content .post-link:hover:before {
  width: 0;
}
.blog .post .post-content .post-link:before {
  content: "";
  width: 100%;
  height: 2px;
  background: #f03a37;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

/* CONTACT */
.contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.contact .title {
  width: 100%;
  float: left;
  margin-bottom: 40px;
}
.contact .title h5 {
  font-weight: 800;
  font-size: 13px;
  color: #8f999a;
}
.contact .title h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 38px;
  margin: 0;
}
.contact .contact-box {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.contact .contact-box h6 {
  font-size: 16px;
  font-weight: 800;
}
.contact .contact-box p {
  font-family: "Libre Baskerville", serif;
  line-height: 30px;
  font-size: 18px;
  color: #8f999a;
  margin: 0;
}
.contact .contact-box a {
  display: block;
  font-family: "Libre Baskerville", serif;
  line-height: 30px;
  font-size: 18px;
  color: #8f999a;
  margin-bottom: 30px;
}
.contact .contact-box a:last-child {
  margin-bottom: 0;
}
.contact .map {
  width: 100%;
  height: 340px;
  float: left;
  margin-top: 30px;
  margin-bottom: 60px;
  background: #8f999a;
}
.contact .alert {
  width: 100%;
  float: left;
  border-radius: 0;
  border: none;
  font-weight: 700;
}
.contact .form-group {
  width: 100%;
  float: left;
  padding: 0 15px;
}
.contact #success, .contact #error {
  display: none;
  float: left;
}
.contact #error {
  background: red;
  color: #fff;
}
.contact #success {
  background: green;
  color: #fff;
}
.contact form {
  width: 100%;
  float: left;
}
.contact form .form-group {
  width: 100%;
  float: left;
  padding: 0 15px;
}
.contact form .form-group:nth-child(1) {
  width: 50%;
}
.contact form .form-group:nth-child(2) {
  width: 50%;
}
.contact form .form-group span {
  width: 100%;
  float: left;
  line-height: 54px;
  font-weight: 600;
}
.contact form .form-group input {
  width: 100%;
  float: left;
  height: 54px;
  padding: 0 20px;
  border: none;
  background: #f3f3f3;
}
.contact form .form-group textarea {
  width: 100%;
  float: left;
  height: 120px;
  padding: 20px;
  border: none;
  background: #f3f3f3;
}
.contact form .form-group button {
  height: 54px;
  background: #313434;
  color: #fff;
  padding: 0 30px;
  border: none;
  font-size: 13px;
  font-weight: 600;
}
.contact form .form-group label.error {
  font-weight: 600;
  margin-top: 10px;
}
.contact form .form-group .error {
  color: #f03a37;
}

/* FOOTER */
.footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
  background: #313434;
  text-align: center;
}
.footer .container {
  display: flex;
}
.footer .container .content-box {
  flex: 1;
  color: #fff;
}
.footer .container .content-box:nth-child(1) {
  text-align: left;
}
.footer .container .content-box:nth-child(3) {
  text-align: right;
}
.footer .container .content-box figure {
  display: block;
  height: 45px;
  margin-bottom: 15px;
}
.footer .container .content-box figure img {
  height: 45px;
}
.footer .container .content-box h2 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 30px;
  opacity: 0.5;
}
.footer .container .content-box p {
  font-size: 17px;
  font-family: "Libre Baskerville", serif;
  line-height: 32px;
  margin: 0;
}

/* SUB FOOTER */
.sub-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 40px 40px;
  background: #11212E;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: "Libre Baskerville", serif;
}
.sub-footer .container {
  display: flex;
}
.sub-footer .container small {
  margin-left: 0;
  color: #fff;
  font-size: 12px;
}
.sub-footer .container ul {
  margin-left: auto;
  margin-bottom: 0;
  padding: 0;
}
.sub-footer .container ul li {
  float: left;
  margin: 0;
  margin-left: 30px;
  padding: 0;
  list-style: none;
}
.sub-footer .container ul li a {
  float: left;
  color: #fff;
  font-size: 12px;
}

/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
  .header .slide-inner {
    padding: 0 60px;
    padding-left: 120px;
  }

  .header .swiper-container .swiper-slide h5 {
    font-size: 28px;
  }

  .works .works-grid li {
    width: 50%;
  }

  .side-content-block .inner {
    width: 60%;
  }

  .awards {
    background-size: auto 100%;
  }

  .awards .text-right {
    text-align: center !important;
  }

  .awards p {
    padding: 0;
  }

  .icon-content-block {
    flex-direction: row;
  }

  .icon-content-block .content-box {
    width: 50%;
    flex: auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .clients ul li figure {
    padding: 15px 40px;
  }

  .page-header .inner-content .inner {
    padding: 0 120px;
  }

  .page-header .inner-content .inner h2 {
    font-size: 12vw;
  }

  .text-content-block h2 {
    font-size: 10vw;
    margin-bottom: 50px;
  }

  .team ul li {
    width: 33.33333%;
    border-top: 1px solid #dbe4e4;
  }

  .team ul li:nth-child(2) {
    margin-top: 0;
  }

  .team ul li:nth-child(4) {
    margin-top: 0;
  }

  .services-content-block .content-box h4 {
    font-size: 22px;
  }

  .services-content-block .content-box ul {
    font-size: 15px;
  }

  .contact form .form-group:nth-child(1) {
    width: 100%;
  }

  .contact form .form-group:nth-child(2) {
    width: 100%;
  }

  .footer .container {
    flex-direction: column;
    text-align: left;
  }

  .footer .container .content-box:nth-child(3) {
    text-align: left;
  }
}
/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .navbar {
    padding: 30px 25px;
  }

  .navbar .logo a img {
    height: 40px;
  }

  .soundbar {
    display: none;
  }

  .navigation-menu.open address {
    display: none;
  }

  .navigation-menu .inner ul {
    width: 100%;
  }

  .navigation-menu .inner ul li a {
    font-size: 40px;
  }

  .header:after {
    height: 30px;
    left: 25px;
  }

  .header .social-media {
    bottom: 40px;
    left: 25px;
  }

  .header .swiper-container .swiper-button-prev {
    display: none;
  }

  .header .swiper-container .swiper-button-next {
    display: none;
  }

  .header .slide-inner {
    padding: 0 10px;
  }

  .header .swiper-container .swiper-slide h5 {
    font-size: 17px;
  }

  .header .swiper-container .swiper-slide h5:before {
    display: none;
  }

  .header .swiper-container .swiper-slide h2 {
    font-size: 60px;
  }

  .header .swiper-container .swiper-pagination-fraction {
    display: none;
  }

  .page-header .inner-content .inner {
    padding: 0 10px;
  }

  .page-header .social-media {
    left: 25px;
  }

  .text-content-block {
    padding: 75px 10px;
  }

  .text-content-block h4 {
    font-size: 7vw;
  }

  .works {
    padding: 75px 10px;
  }

  .works .works-title {
    width: 100%;
  }

  .works .works-grid li {
    width: 100%;
    padding: 0 15px;
    margin-bottom: 40px;
  }

  .works .works-grid li:last-child {
    margin-bottom: 0;
  }

  .side-content-block .inner {
    width: 100%;
    padding: 20vh 10px;
  }

  .icon-content-block .content-box {
    width: 100%;
    border-right: 0;
    padding: 75px 25px;
  }

  .awards {
    padding: 75px 10px;
    background: none;
  }

  .awards .odometer {
    font-size: 40px;
  }

  .clients {
    padding: 75px 10px;
  }

  .clients ul:before {
    right: 0;
  }

  .clients ul li {
    width: 50%;
  }

  .clients ul li figure {
    padding: 15px 20px;
  }

  .team {
    padding: 75px 10px;
  }

  .team ul {
    padding: 0;
  }

  .team ul li {
    width: 100%;
    margin-bottom: 40px;
  }

  .team ul li:last-child {
    margin-bottom: 0;
  }

  .services-content-block {
    padding: 75px 10px;
  }

  .services-content-block .content-box {
    margin: 20px 0;
  }

  .blog .post {
    padding: 0 15px;
  }

  .blog .post .post-content {
    padding: 0;
  }

  .blog .post .post-content .post-title {
    font-size: 7vw;
  }

  .contact {
    padding: 75px 10px;
  }

  .contact .title {
    margin-bottom: 20px;
  }

  .contact form .form-group {
    padding: 0;
  }

  .contact .map {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .footer {
    padding: 75px 10px;
  }

  .footer .container .content-box {
    margin-bottom: 50px;
  }

  .footer .container .content-box:last-child {
    margin-bottom: 0;
  }

  .footer .container .content-box h2 {
    margin-bottom: 20px;
  }

  .sub-footer {
    padding: 30px 10px;
  }

  .sub-footer .container {
    flex-direction: column;
    text-align: left;
  }

  .sub-footer .container ul {
    margin-left: 0;
    margin-top: 10px;
  }

  .sub-footer .container ul li {
    margin-left: 0;
    margin-right: 10px;
  }
}

/*# sourceMappingURL=style.css.map */


/* =========================
   LEGACY CIRCLE - CUSTOM
   ========================= */

/* HERO TITLE (index.html slide) */
.header .hero-title {
  font-size: 4.39vw;
  line-height: 1.4;
  color: #fff;
  font-weight: 300;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  text-transform: none;
  margin: 0;
  letter-spacing: 0.08em;
}
.header .hero-title span {
  color: #D6AB60;
  font-weight: 300;
}

@media only screen and (max-width: 991px) {
  .header .hero-title {
    font-size: 5vw;
  }
}

@media only screen and (max-width: 600px) {
  .header .hero-title {
    font-size: 28px;
    line-height: 1.35;
  }
}


/* ============ HERO ENTRANCE ANIMATION ============ */

/* Top orange bar — enters from right to left */
.header:before {
  transform: translateX(110%);
  transition: transform 3s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
}
.page-loaded .header:before {
  transform: translateX(0);
}

/* Bottom orange bar — enters from left to right */
.header:after {
  transform: translateX(-110%);
  transition: transform 3s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
}
.page-loaded .header:after {
  transform: translateX(0);
}

/* Hero title — enters big (from front) and scales down to final size */
.header .hero-title {
  opacity: 0;
  transform: scale(3);
  transform-origin: center center;
  transition:
    transform 3s cubic-bezier(0.23, 1, 0.32, 1) 1.3s,
    opacity 0.8s ease 1.3s;
}
.page-loaded .header .hero-title {
  opacity: 1;
  transform: scale(1);
}


/* Hide vertical lines overlay on hero slide */
.header .slide-inner:after {
  display: none;
}


/* Hamburger menu — small 'CAPITAL' pre-label above an item */
.navigation-menu .inner ul li a .pre {
  display: block;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.3em;
  margin-bottom: 2px;
  opacity: 0.85;
  text-transform: uppercase;
  text-align: right;
  line-height: 1;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Hamburger menu — make items fit on one line and even vertical rhythm */
.navigation-menu .inner ul li a {
  font-size: 3vw;
  line-height: 1.15;
}
.navigation-menu .inner ul li {
  padding: 10px 0;
}

/* Hamburger menu — brand tagline replacing the ADDRESS block */
.navigation-menu .inner address.brand-tagline {
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-size: 20px;              /* ← TAMAÑO: ajusta este valor (px o vw) */
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #fff;                  /* "Impulsados por la familia" en blanco */
  margin-left: 50px;               /* ← POSICIÓN HORIZONTAL: súbelo para mover a la derecha */
}
.navigation-menu .inner address.brand-tagline p {
  margin: 0;
}
.navigation-menu .inner address.brand-tagline span {
  color: #D6AB60;               /* "Guiados por el propósito" en dorado */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  display: inline;
  margin: 0;
}

/* ============================================================
   LEGACY CIRCLE — FOOTER
   ============================================================ */
.lc-footer {
  padding: 80px 0 80px;                 /* ← ESPACIADO vertical del footer */
  background: #11212E;              /* fondo igual que el resto del sitio */
}
.lc-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.lc-footer .lc-footer-logo {
  flex: 0 0 auto;
}
.lc-footer .lc-footer-logo img {
  height: 70px;                         /* ← TAMAÑO del logo del footer */
  width: auto;
  display: block;
}
.lc-footer .lc-footer-info {
  flex: 1 1 auto;
  text-align: right;
  color: #fff;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
.lc-footer .lc-footer-info h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0 0 10px 0;
  color: #fff;
  text-transform: uppercase;
}
.lc-footer .lc-footer-info p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  margin: 0;
  color: #b8c3cc;                       /* gris claro del subtexto */
  font-family: inherit;
}

/* ============================================================
   LEGACY CIRCLE — SUB-FOOTER (línea inferior)
   ============================================================ */
.lc-sub-footer {
  padding: 20px 40px;
  border-top: 1px solid rgba(255,255,255,0.12);  /* línea separadora */
}
.lc-sub-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.lc-sub-footer .container small {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  margin: 0;
  flex: 1;
  text-align: left;
}
.lc-sub-footer .container .lc-privacy,
.lc-sub-footer .container .lc-contact {
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}
.lc-sub-footer .container .lc-privacy {
  flex: 1;
  text-align: center;
}
.lc-sub-footer .container .lc-contact {
  flex: 1;
  text-align: right;
}
.lc-sub-footer .container .lc-privacy:hover,
.lc-sub-footer .container .lc-contact:hover {
  color: #D6AB60;
}

/* ============================================================
   LEGACY CIRCLE — STATEMENT (sección tras el hero)
   ============================================================ */
.lc-statement {
  width: 100%;
  background: #fff;                     /* fondo blanco */
  padding: 70px 20px;                  /* ← ESPACIADO vertical de la sección */
  text-align: center;
}
.lc-statement .lc-statement-title {
  color: #9D651F;                       /* ← COLOR "EL MOMENTO DEL" (azul marino oscuro) */
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 56px;                      /* ← TAMAÑO del título */
  font-weight: 700;                     /* ← PESO parte clara (thin) */
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 50px 0;                   /* ← separación con el texto de abajo */
  text-transform: uppercase;
}
.lc-statement .lc-statement-title span {
  color: #9D651F;                       /* ← COLOR "EMPRESARIO" (dorado) */
  font-weight: 700;                     /* ← PESO parte bold */
  margin-left: 0.2em;
  font-size: 70px;
}
.lc-statement .lc-statement-text {
  color: #426481;                       /* ← COLOR del texto (azul marino) */
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;                      /* ← TAMAÑO del texto */
  font-weight: 500;
  letter-spacing: 0.25em;               /* ← SEPARACIÓN entre letras */
  line-height: 2;
  margin: 0;
}

/* ============================================================
   LEGACY CIRCLE — PILLARS (CAPACIDAD / FLEXIBILIDAD / RELEVANCIA)
   Dos columnas entran de derecha a izquierda y se acomodan.
   ============================================================ */
.lc-pillars {
  position: relative;
  width: 100%;
  min-height: 750px;                    /* ← ALTURA de la sección */
  background: #426481;                  /* ← COLOR de fondo (azul) */
  overflow: hidden;                     /* esconde los bars mientras entran */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
}
.lc-pillars-bars {
  position: absolute;
  left: 100px;                           /* ← ESPACIO entre el borde izquierdo y las columnas */
  top: 0;
  bottom: 0;
  display: flex;
  height: 100%;
  z-index: 1;
}
.lc-pillar-bar {
  height: 100%;
}
.lc-pillar-orange {
  width: 130px;                          /* ← ANCHO columna naranja */
  background: #D28729;                  /* ← COLOR columna naranja */
}
.lc-pillar-blue {
  width: 180px;                         /* ← ANCHO columna azul clara */
  background: #83A3BF;                  /* ← COLOR columna azul clara */
}
.lc-pillars-text {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: left;                     /* ← las 3 palabras alineadas por la izquierda */
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
.lc-pillars-text p {
  font-size: 24px;                      /* ← TAMAÑO de los títulos */
  font-weight: 400;
  letter-spacing: 0.6em;
  line-height: 1.6;
  margin: 0;
  text-transform: uppercase;
}

/* Desktop only (≥ 992px): texto en esquina superior derecha con margen,
   para no solaparse con las barras que están a la izquierda */
@media (min-width: 992px) {
  .lc-pillars-text {
    position: absolute !important;
    top: 80px;
    right: 80px;
    bottom: auto;
    left: auto;
    margin: 0 !important;
    text-align: right;
    max-width: 55%;                      /* evita que el texto se extienda hacia las barras */
  }
}

/* Animación — deslizar desde la derecha */
.lc-slide-in-right {
  animation-name: lcSlideInRight;
}
@keyframes lcSlideInRight {
  from {
    opacity: 0;
    transform: translateX(100vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   LEGACY CIRCLE — QUESTIONS (Te has hecho estas preguntas)
   Slider de 5 preguntas con puntos de navegación
   ============================================================ */
.lc-questions {
  width: 100%;
  background: #fff;                             /* ← FONDO de la sección */
  padding: 120px 60px;                          /* ← ESPACIADO vertical */
}
.lc-questions .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}
.lc-questions-left {
  flex: 1 1 380px;
  color: #8B5A2B;                               /* bronce del título */
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
.lc-questions-title {
  font-size: 60px;                              /* ← TAMAÑO del título */
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 28px 0;
  color: #85512C;
  letter-spacing: 0.1px;                               /* ← COLOR del título (bronce) */
}
.lc-questions-subtitle {
  font-size: 24px;                              /* ← TAMAÑO del subtítulo */
  font-weight: 400;
  line-height: 1.6;
  color: #11212E;                               /* ← COLOR del subtítulo */
  margin: 0;
}

/* ----- Tarjeta de la pregunta ----- */
.lc-questions-right {
  flex: 1 1 420px;
}
.lc-question-card {
  position: relative;                           /* necesario para posicionar los dots */
  border: 2px solid #A0BFD4;                  /* ← COLOR del borde */
  border-radius: 20px;                          /* ← REDONDEZ de la tarjeta */
  padding: 60px 10px 60px;                      /* ← ESPACIADO interno */
  background: #fff;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
.lc-questions-slides {
  position: relative;
  min-height: 180px;                            /* ← ALTURA mínima del bloque de pregunta */
  margin-bottom: 35px;
}
/* Todas las preguntas viven apiladas para poder hacer crossfade real */
.lc-question-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(14px);                  /* ← empieza un poco abajo */
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;                         /* la inactiva no bloquea clics */
}
.lc-question-slide.active {
  opacity: 1;
  transform: translateY(0);                     /* ← sube y aparece */
  pointer-events: auto;
}
.lc-question-slide p {
  font-size: 36px;                              /* ← TAMAÑO de la pregunta */
  font-weight: 300;
  line-height: 1.5;
  color: #11212E;                               /* ← COLOR del texto de la pregunta */
  margin: 0;
  text-align: center;
}
.lc-qmark {
  color: #83A3BF;                               /* ← COLOR de los signos ¿ ? */
  font-size: 36px;                             /* signos un poco más grandes */
  font-weight: 300;
  vertical-align: -0.02em;
}

/* ----- Puntos de navegación ----- */
.lc-question-dots {
  position: absolute;                           /* sobre el borde inferior */
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);              /* centrado + mitad fuera del borde */
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 0 12px;
  background: #fff;                             /* tapa el borde detrás de los dots */
}
.lc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #D8D1C2;                          /* ← COLOR punto inactivo */
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.lc-dot:hover {
  transform: scale(1.15);
}
.lc-dot.active {
  background: #1e3a4a;                          /* ← COLOR punto activo */
}

/* ============================================================
   LEGACY CIRCLE — CAPITAL SOCIOEMOCIONAL
   ============================================================ */
.lc-capital {
  width: 100%;
  background: #fff;
  padding: 100px 10px 120px;                    /* ← ESPACIADO vertical de la sección */
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color: #1e3a4a;                               /* color base del texto */
}
.lc-capital .container {
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- Encabezado ---- */
.lc-capital-header {
  margin-bottom: 80px;                          /* ← ESPACIO entre encabezado y columnas */
}
.lc-capital-title {
  margin: 0 0 24px 0;
  line-height: 1;
  color: #1e3a4a;
  font-weight: 700;
  font-size: 56px;                              /* ← TAMAÑO de "SOCIOEMOCIONAL" */
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lc-capital-pre {
  display: block;
  font-size: 50px;                            /* "CAPITAL" más pequeño */
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lc-capital-subtitle {
  margin: 0;
  font-size: 24px;                              /* ← TAMAÑO del subtítulo */
  font-weight: 500;
  letter-spacing: 0.30em;
  color: #426481;
  text-transform: uppercase;
  line-height: 1.9;
}

/* ---- Grid de dos columnas ---- */
.lc-capital-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;             /* ← PROPORCIÓN izquierda/derecha */
  gap: 80px;                                    /* ← ESPACIO entre columnas */
  align-items: start;
}

/* ---- Divisor superior único (línea + rectángulo azul) ---- */
.lc-capital-top-divider {
  position: relative;
  width: 100%;
  margin-bottom: 60px;                          /* ← ESPACIO entre divisor y las columnas */
}
.lc-capital-top-line {
  width: 100%;
  height: 5px;                                /* ← GROSOR de la línea */
  background: #E3DED2;                          /* ← COLOR de la línea */
}
.lc-capital-top-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;             /* mismo ratio que la grid de abajo */
  gap: 80px;                                    /* mismo gap que la grid de abajo */
}
.lc-capital-top-block {
  grid-column: 2;                               /* cae en la columna derecha */
  height: 35px;                                 /* ← ALTO del rectángulo azul */
  background: #3F6A86;                          /* ← COLOR del rectángulo azul */
}

/* ---- Columna izquierda: logo + descripción ---- */
.lc-capital-left {
  margin-top: 150px;                             /* ← DESPLAZA HACIA ABAJO el bloque izquierdo (logo + texto) */
}
.lc-capital-logo-placeholder {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #D6AB60;                    /* aro dorado — placeholder */
  margin-bottom: 30px;
  position: relative;
}
.lc-capital-logo-placeholder::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px;
  height: 18px;
  background: #D6AB60;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.lc-capital-description {
  margin: 0;
  font-size: 18px;                              /* ← TAMAÑO del párrafo descriptivo */
  line-height: 2;
  color: #1e3a4a;
  font-weight: 400;
  padding-right: 60px;
  padding-top: 10px;
}

/* ---- Columna derecha: lista + imagen grande ---- */
.lc-capital-list {
  list-style: none;
  margin: 0 0 50px 0;                           /* ← ESPACIO entre lista e imagen */
  padding: 0;
}
.lc-capital-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;                          /* ← ESPACIO entre items */
  font-size: 24px;                              /* ← TAMAÑO de los items */
  font-weight: 300;
  color: #11212E;
  line-height: 1.4;
}
.lc-capital-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #DDDCCF;                          /* ← COLOR de la viñeta */
}
.lc-capital-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;                          /* ← PROPORCIÓN de la imagen */
  background: #e8ecef;
  border: 1px dashed #A0BFD4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a7488;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.lc-capital-image-placeholder::before {
  content: "Imagen aquí";
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .lc-capital-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .lc-capital-title {
    font-size: 40px;
  }
}

/* ============================================================
   LEGACY CIRCLE — EVOLUTION SLIDER (3 slides)
   Imagen a ancho completo + botón azul + botón invisible abajo-derecha.
   ============================================================ */
/* Evolution — sección con UNA sola imagen + CTA. Ya no hay slider ni scroll-hijack. */
.lc-evolution {
  width: 100%;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.lc-evolution-img {
  display: block;
  width: 100%;
  height: 100vh;                                /* la imagen ocupa el viewport completo */
  object-fit: cover;                            /* cubre todo sin distorsionar */
}

/* Placeholder visible cuando aún no hay imagen */
.lc-evolution-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #eef1f4;
  border: 1px dashed #A0BFD4;
  color: #5a7488;
  font-size: 14px;
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* Botón "Exploremos nuevas posibilidades" — entra desde la derecha + pulso sutil */
.lc-evolution-button {
  position: absolute;
  bottom: 14%;                                  /* ← POSICIÓN desde abajo (↑ valor = más arriba) */
  right: 20%;                                   /* ← POSICIÓN desde la derecha */
  top: auto;
  background: #426481;                          /* ← COLOR dorado de la marca */
  color: #fff !important;
  padding: 10px 16px;                           /* ← TAMAÑO del botón */
  border-radius: 25px;                          /* pill completa */
  text-decoration: none !important;
  font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;                              /* ← TAMAÑO del texto */
  font-weight: 500;
  letter-spacing: 0.04em;
  z-index: 10;                                  /* ↑ debe ganar al .lc-evolution-next (z-index 3) cuando se traslapen */
  cursor: pointer;
  touch-action: manipulation;                   /* el navegador resuelve el tap como click sin esperar gestos */
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(157, 101, 31, 0.35);
  /* estado inicial: fuera a la derecha, invisible */
  transform: translateX(100px);
  opacity: 0;
  transition:
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.25s ease;
}
.lc-evolution-button-arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.3s ease;
}
/* cuando el slide 3 está activo se agrega .is-visible con JS → entra en pantalla */
.lc-evolution-button.is-visible {
  transform: translateX(0);
  opacity: 1;
  animation: lc-evolution-btn-pulse 2.6s ease-out 1.1s infinite;
}
.lc-evolution-button:hover {
  background: #2D4254;
  color: #fff !important;
  text-decoration: none !important;
  animation-play-state: paused;
}
.lc-evolution-button:hover .lc-evolution-button-arrow {
  transform: translateX(6px);
}
/* Palpitación elegante — anillo dorado que se expande hacia afuera */
@keyframes lc-evolution-btn-pulse {
  0% {
    box-shadow:
      0 10px 40px rgba(157, 101, 31, 0.35),
      0 0 0 0 rgba(157, 101, 31, 0.55);
  }
  70% {
    box-shadow:
      0 10px 40px rgba(157, 101, 31, 0.35),
      0 0 0 22px rgba(157, 101, 31, 0);
  }
  100% {
    box-shadow:
      0 10px 40px rgba(157, 101, 31, 0.35),
      0 0 0 0 rgba(157, 101, 31, 0);
  }
}

/* (lc-evolution-next removido — ya no hay slider que avanzar) */

/* LEGACY CIRCLE — Sección "Nuestro único mandato es la familia" */
.lc-mandato {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #fff;
}
.lc-mandato-bg {
  display: block;
  width: 100%;
  height: auto;
}
.lc-mandato-overlay {
  position: absolute;
  top: 22%;      /* centrado vertical en la mitad superior, no pegado a la esquina */
  right: 8%;
  width: 34%;
  z-index: 2;
  line-height: normal;
  pointer-events: none;
}
.lc-mandato-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

/* LEGACY CIRCLE — Franja de imagen */
.lc-franja {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.lc-franja img {
  display: block;
  width: 100%;
  height: auto;
}

/* LEGACY CIRCLE — imagen completa */
.lc-completa {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.lc-completa img {
  display: block;
  width: 100%;
  height: auto;
}

/* LEGACY CIRCLE — Sección SOLUCIONES */
.lc-soluciones {
  width: 100%;
  background: #F3F1E4; /* beige/crema del mockup */
  padding: 80px 5% 90px 8%; /* top  right  bottom  left */
  box-sizing: border-box;
}
.lc-soluciones-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(60px, 4vw, 280px);
  flex-wrap: wrap;
}
.lc-soluciones-title {
  font-size: 56px;
  font-weight: 600;
  color: #11212E;
  margin: 0;
  letter-spacing: .5px;
  line-height: 1;
}
.lc-soluciones-desc {
  font-size: 24px;
  color: #333;
  line-height: 1.6;
  margin: 10px 0 0 0;
  max-width: 560px;
}
.lc-soluciones-divider {
  border: none;
  border-top: 1px solid #c9c4b0;
  margin: 80px 0 60px;
}
.lc-soluciones-body {
  display: flex;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
}
/* --- Bloque "Diseñamos estructura" --- */
.lc-soluciones-estructura {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px;
  border-top: 7px solid #85512C;
  border-bottom: 20px double #85512C;
}
.lc-soluciones-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid #D6AB60;
}
.lc-soluciones-estructura-text {
  color: #D6AB60;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.5px;
  font-weight: 200;
}
/* --- Círculos --- */
.lc-soluciones-circles {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  justify-content: center;
}
.lc-circle {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* estilos para que funcione como <a> sin parecer enlace */
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: transform 0.35s ease;
}
.lc-circle:hover,
.lc-circle:focus {
  text-decoration: none !important;
  color: inherit;
  transform: scale(1.04);                          /* ← feedback sutil al pasar el mouse */
}
.lc-circle-2 {
  margin-left: -60px; /* superposición entre los dos círculos */
}
.lc-circle-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  animation: lc-spin 8s linear infinite;
  transform-origin: 50% 50%;
}
.lc-circle-2 .lc-circle-img {
  animation: lc-spin-reverse 8s linear infinite;
}
@keyframes lc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes lc-spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.lc-circle-text {
  position: relative;
  z-index: 2;
  text-align: left;
  color: #2b2b2b;
  line-height: 1.3;
}
.lc-circle-top {
  display: block;
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 4px;
}
.lc-circle-bottom {
  display: block;
  font-size: 24px;
  font-weight: 600;
}
/* --- Pregunta inferior --- */
.lc-soluciones-question {
  text-align: center;
  color: #226481;
  letter-spacing: 8px;
  font-size: 24px;
  font-weight: 500;
  margin-top: 60px;
}
/* --- Slider de 3 imágenes que rotan dentro de "Diseñamos estructura" --- */
.lc-estructura-slider {
  position: relative;
  width: 250px;   /* ← AJUSTA al ancho de tus imágenes */
  height: 130px;   /* ← AJUSTA al alto de tus imágenes */
}
.lc-estructura-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: lc-estructura-cycle 4.5s infinite;
}
.lc-estructura-img:nth-child(1) { animation-delay: 0s; }
.lc-estructura-img:nth-child(2) { animation-delay: 1.5s; }
.lc-estructura-img:nth-child(3) { animation-delay: 3s; }
@keyframes lc-estructura-cycle {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* ← fade in (0→1) */
  30%  { opacity: 1; }   /* ← visible */
  40%  { opacity: 0; }   /* ← fade out */
  100% { opacity: 0; }   /* ← oculta hasta que le toque otra vez */
}

/* LEGACY CIRCLE — Sección "Nuestro modelo" (imagen centrada con aire) */
.lc-modelo {
  width: 100%;
  background: #fff;
  padding: 90px 3%;          /* ← AIRE arriba/abajo y a los lados */
  box-sizing: border-box;
  text-align: center;
}
.lc-modelo-inner {
  display: inline-block;
  max-width: 1400px;         /* ← ancho máximo de la imagen */
  width: 100%;
}
.lc-modelo-inner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   LEGACY CIRCLE — RESPONSIVE (TABLET y MÓVIL)
   ============================================================ */

/* ---------- TABLET (≤ 991px) ---------- */
@media (max-width: 991px) {
  /* Navegación / header: barras decorativas más delgadas */
  .header:before { height: 30px; }
  .header:after  { height: 50px; }

  /* Hero */
  .hero-title { font-size: 36px !important; line-height: 1.15; }

  /* Menú hamburguesa — items un poco más chicos */
  .navigation-menu .inner ul li { font-size: 2.4vw; }
  .navigation-menu .inner ul li a { font-size: 28px; line-height: 1.2; }
  .navigation-menu .inner ul li a .pre { font-size: 13px; letter-spacing: 0.25em; }

  /* Statement */
  .lc-statement { padding: 70px 20px; }
  .lc-statement .lc-statement-title { font-size: 40px; margin-bottom: 36px; }
  .lc-statement .lc-statement-text { font-size: 20px; letter-spacing: 0.4em; line-height: 1.8; }

  /* Evolution — botón más compacto */
  .lc-evolution-button { font-size: 14px; padding: 8px 16px; right: 8%; }

  /* Mandato — overlay más pequeño */
  .lc-mandato-overlay { width: 42%; top: 18%; right: 5%; }

  /* Questions — stack */
  .lc-questions { padding: 80px 30px; }
  .lc-questions .container { flex-direction: column; gap: 30px; align-items: stretch; }
  .lc-questions-left,
  .lc-questions-right {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;          /* ← evita que el flex-basis 380/420px reserve altura */
  }
  .lc-questions-title { font-size: 36px; }
  .lc-questions-slides { min-height: 150px; }
  .lc-question-slide p { font-size: 26px; }
  .lc-qmark { font-size: 26px; }

  /* Soluciones */
  .lc-soluciones { padding: 60px 6% 70px; }
  .lc-soluciones-title { font-size: 38px; }
  .lc-soluciones-body { gap: 50px; }
  .lc-circle { width: 220px; height: 220px; }
  .lc-circle-2 { margin-left: -50px; }
  .lc-circle-top { font-size: 16px; }
  .lc-circle-bottom { font-size: 18px; }
  .lc-soluciones-question { font-size: 18px; letter-spacing: 5px; }

  /* Pillars */
  .lc-pillars-text p { font-size: 44px; }

  /* Capital (c_socioemocional / c_economico) — stack columnas */
  .lc-capital-grid { grid-template-columns: 1fr; gap: 30px; }
  .lc-capital-top-grid { grid-template-columns: 1fr; }
  /* En móvil cerramos el hueco entre la línea divisora y el logo:
     - El divisor pierde su gran margen inferior (60 → 16px)
     - El rectángulo azul (decorativo) se oculta porque no tiene sentido en columna única
     - Se anula el margin-top de 150px de la columna izquierda
       (en escritorio empuja el logo hacia abajo para alinearlo con el texto;
        en móvil solo crea un hueco enorme arriba del logo) */
  .lc-capital-top-divider { margin-bottom: 16px; }
  .lc-capital-top-block { display: none; }
  .lc-capital-left { margin-top: 0; }

  /* Modelo */
  .lc-modelo { padding: 60px 3%; }

  /* Footer — stack logo + info */
  .lc-footer .container { flex-direction: column; align-items: center; text-align: center; gap: 30px; }
  .lc-footer .lc-footer-info { text-align: center !important; flex: 0 0 auto; }

  .lc-sub-footer .container { flex-direction: column; gap: 10px; text-align: center; }
}

/* ---------- MÓVIL (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* Preloader — logo 20% más pequeño en móvil (110px → 88px) */
  .preloader figure img { height: 88px; }

  /* Navegación / header decorativo */
  .header:before { height: 20px; }
  .header:after  { height: 35px; left: 20px; }
  .navbar { padding: 15px 20px; }
  .navbar .logo img { height: 45px; }

  /* Menú hamburguesa */
  .navigation-menu .inner { padding: 80px 28px 40px; }
  .navigation-menu .inner ul { width: 85%; padding-right: 28px; }
  .navigation-menu .inner ul li { padding: 14px 0; font-size: 34px; }
  .navigation-menu .inner ul li a { font-size: 34px; line-height: 1.2; letter-spacing: 0.04em; text-align: right; }
  .navigation-menu .inner ul li a .pre {
    font-size: 14px;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
    opacity: 0.75;
  }
  .navigation-menu .inner address.brand-tagline {
    font-size: 18px;
    margin-left: 0;
    margin-bottom: 36px;
  }
  .navigation-menu .brand-tagline p { font-size: 18px; line-height: 1.5; }
  .navigation-menu .brand-tagline p span { font-size: 18px !important; }

  /* Hero */
  /* Header — más bajo en móvil + título más grande para que sea legible */
  .header { height: 70vh !important; }
  main { margin-top: 70vh !important; }
  .hero-title { font-size: 40px !important; padding: 0 20px; line-height: 1.2; }

  /* Statement */
  .lc-statement { padding: 50px 20px; }
  .lc-statement .lc-statement-title { font-size: 30px; margin-bottom: 28px; }
  .lc-statement .lc-statement-text { font-size: 16px; letter-spacing: 0.25em; line-height: 1.7; }

  /* Evolution — en móvil la imagen baja a altura natural */
  .lc-evolution { height: auto; }
  .lc-evolution-img { height: auto; object-fit: initial; }
  .lc-evolution-button {
    bottom: 8%;
    right: 50%;
    transform: translateX(50%);            /* centrado horizontal */
    font-size: 13px;
    padding: 10px 20px;
    gap: 8px;
  }
  .lc-evolution-button.is-visible {
    transform: translateX(50%);
  }
  .lc-evolution-button-arrow { font-size: 16px; }

  /* Mandato — oculta el overlay o redúcelo mucho (las imágenes ya se quedan cortas) */
  .lc-mandato-overlay { width: 38%; top: 10%; right: 4%; }   /* 30% más pequeño que el 55% anterior */

  /* Questions */
  .lc-questions { padding: 60px 20px; }
  .lc-questions-title { font-size: 28px; }
  .lc-questions-subtitle { font-size: 14px; }
  .lc-question-card { padding: 40px 20px 50px; }
  .lc-questions-slides { min-height: 130px; }
  .lc-question-slide p { font-size: 20px; line-height: 1.45; }
  .lc-qmark { font-size: 22px; }

  /* Soluciones — círculos apilados verticalmente, sin overlap horizontal */
  .lc-soluciones { padding: 50px 5% 60px; }
  .lc-soluciones-header { gap: 20px; }
  .lc-soluciones-title { font-size: 30px; }
  .lc-soluciones-desc { font-size: 13px; }
  .lc-soluciones-divider { margin: 30px 0 40px; }
  .lc-soluciones-body { flex-direction: column; gap: 40px; align-items: center; }
  .lc-soluciones-circles { flex-direction: column; gap: 0; }
  .lc-soluciones-estructura { padding: 14px 20px; }
  .lc-soluciones-estructura-text { font-size: 13px; }
  .lc-estructura-slider { width: 170px; height: 65px; }
  .lc-circle { width: 200px; height: 200px; }
  .lc-circle-2 { margin-left: 0; margin-top: -40px; } /* overlap vertical en lugar de horizontal */
  .lc-circle-top { font-size: 14px; }
  .lc-circle-bottom { font-size: 15px; }
  .lc-soluciones-question { font-size: 14px; letter-spacing: 3px; margin-top: 40px; line-height: 1.6; }

  /* Pillars */
  .lc-pillars { min-height: 400px; }
  .lc-pillars-bars { width: 55%; }
  /* Barras 70% más delgadas en móvil (130/180px → 40/55px) */
  .lc-pillar-orange { width: 40px; }
  .lc-pillar-blue   { width: 55px; }
  .lc-pillars-text { padding: 40px 20px; }
  .lc-pillars-text p { font-size: 30px; line-height: 1; }

  /* Capital */
  .lc-capital { padding: 60px 20px; }
  .lc-capital-title { font-size: 32px; }
  .lc-capital-subtitle { font-size: 13px; letter-spacing: 3px; }
  .lc-capital-subtitle br { display: none; }   /* el salto solo aplica en escritorio */
  .lc-capital-description { font-size: 14px; }
  .lc-capital-list li { font-size: 14px; }

  /* Modelo */
  .lc-modelo { padding: 40px 3%; }

  /* Franja + completa — sin cambios, ya son width: 100% */

  /* Footer */
  .lc-footer { padding: 50px 20px; }
  .lc-footer .lc-footer-logo img { height: 50px; }
  .lc-footer .lc-footer-info h2 { font-size: 13px; }
  .lc-footer .lc-footer-info p { font-size: 12px; }

  .lc-sub-footer { padding: 15px 20px; font-size: 11px; }
  .lc-sub-footer a { font-size: 11px; }
}

/* ---------- MÓVIL CHICO (≤ 480px) ---------- */
@media (max-width: 480px) {
  /* Header — pantalla chica: aún más bajo y título proporcional */
  .header { height: 60vh !important; }
  main { margin-top: 60vh !important; }
  .hero-title { font-size: 30px !important; line-height: 1.2; }
  .lc-statement .lc-statement-title { font-size: 24px; margin-bottom: 22px; }
  .lc-statement .lc-statement-text { font-size: 14px; letter-spacing: 0.2em; }
  .lc-soluciones-title { font-size: 26px; }
  .lc-questions-title { font-size: 24px; }
  .lc-question-card { padding: 30px 16px 45px; }
  .lc-questions-slides { min-height: 120px; }
  .lc-question-slide p { font-size: 17px; line-height: 1.4; }
  .lc-qmark { font-size: 19px; }
  .lc-pillars-text p { font-size: 24px; }
  .lc-capital-title { font-size: 26px; }
  .lc-circle { width: 170px; height: 170px; }
  .lc-circle-2 { margin-left: 0; margin-top: -32px; }
  .lc-circle-top { font-size: 12px; }
  .lc-circle-bottom { font-size: 13px; }
  .lc-evolution-button { font-size: 11px; padding: 8px 16px; gap: 6px; }
  .lc-evolution-button-arrow { font-size: 14px; }

  /* Menú hamburguesa — móvil chico */
  .navigation-menu .inner { padding: 70px 20px 30px; }
  .navigation-menu .inner ul { width: 88%; padding-right: 20px; }
  .navigation-menu .inner ul li { padding: 10px 0; font-size: 26px; }
  .navigation-menu .inner ul li a { font-size: 26px; text-align: right; }
  .navigation-menu .inner ul li a .pre { font-size: 12px; letter-spacing: 0.2em; margin-bottom: 4px; }
  .navigation-menu .inner address.brand-tagline { font-size: 15px; }
  .navigation-menu .brand-tagline p,
  .navigation-menu .brand-tagline p span { font-size: 15px !important; }
}


/* ============================================================
    MFO — Botón CTA dentro de lc-pillars
    ============================================================ */
    .lc-pillars-cta {
      position: absolute;                    /* ← se saca del flujo: no afecta al texto */
      bottom: 25%;                          /* ← DISTANCIA desde abajo (↑ valor = más arriba) */
      left: 45%;                             /* ← centrado horizontal */
      transform: translateX(-50%);
      z-index: 3;
      padding: 16px 36px;                    /* ← tamaño del botón (vertical  horizontal) */
      background: #617681;                   /* ← FONDO semi-transparente */
      color: #fff !important;                /* ← COLOR del texto */
      font-size: 16px;                       /* ← TAMAÑO del texto */
      font-weight: 400;
      letter-spacing: 0.5px;
      text-decoration: none !important;
      border-radius: 10px;                   /* ← radio de las esquinas (pill) */
      transition: background 0.3s ease;
      white-space: nowrap;
    }
    .lc-pillars-cta:hover,
    .lc-pillars-cta:focus {
      background: rgba(255, 255, 255, 0.28);
      color: #fff !important;
      text-decoration: none !important;
    }

/* ============================================================
   LEGACY CIRCLE — SIDEBAR (escritorio ≥ 1024px)
   En móvil/tablet (< 1024px) queda oculta y se mantiene
   el menú hamburguesa actual.
   ============================================================ */
.lc-sidebar { display: none; }   /* default oculto */

@media (min-width: 1024px) {
  .lc-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    background: #11212E;
    color: #fff;
    z-index: 100;
    padding: 38px 24px 24px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .lc-sidebar-logo {
    margin-bottom: 50px;
    text-align: center;
  }
  .lc-sidebar-logo a {
    display: inline-block;
    line-height: 0;
  }
  .lc-sidebar-logo img {
    max-width: 170px;
    height: auto;
    display: inline-block;
  }

  .lc-sidebar-nav {
    flex: 1;                                  /* empuja el footer del sidebar al fondo */
  }
  .lc-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .lc-sidebar-nav li {
    margin-bottom: 4px;
  }
  .lc-sidebar-nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-family: "Segoe UI", "Open Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
  }
  .lc-sidebar-nav a:hover {
    color: #D6AB60;                           /* dorado de marca al hover */
    border-bottom-color: rgba(214, 171, 96, 0.4);
    padding-left: 8px;
  }
  .lc-sidebar-nav a.is-active {
    color: #D6AB60;                           /* página actual destacada en dorado */
    font-weight: 600;
  }

  .lc-sidebar-footer {
    margin-top: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* Esconder la navbar superior y el menú hamburguesa cuando hay sidebar */
  .navbar,
  .navigation-menu,
  .sandwich-nav,
  .sandwich-btn { display: none !important; }

  /* Reservar espacio para el sidebar dejando el área de contenido del body
     con (100vw - 250px). Todo lo que está dentro (main, footers, secciones)
     se ajusta automáticamente a ese ancho y centra correctamente
     dentro del "cuadro nuevo".

     Nota: como el sidebar es position:fixed (relativo al viewport),
     el padding-left del body NO lo afecta — sigue pegado al borde izquierdo
     de la pantalla, encima del padding. */
  body {
    padding-left: 250px;
    box-sizing: border-box;
    overflow-x: hidden;                       /* seguro contra cualquier scroll horizontal */
  }

  /* El .header está en position:fixed en la base del template (relativo al
     viewport, no al body), por lo que el padding-left del body no lo afecta.
     Lo desplazamos manualmente para que ocupe solo el cuadro nuevo. */
  .header {
    left: 250px !important;
    width: calc(100% - 250px) !important;
  }

  /* Mismo razonamiento para el preloader (pantalla de carga inicial)
     y el transition-overlay (animación al cambiar de página).
     Así el sidebar se mantiene visible y "anclado" durante las transiciones.

     IMPORTANTE: el !important se omite a propósito en `left` porque el
     template oculta el preloader animando .page-loaded .preloader { left: -100% }.
     Si pusiéramos !important aquí, esa animación se rompería y el preloader
     quedaría pegado y nunca desaparecería. */
  .preloader,
  .transition-overlay {
    left: 250px;
    width: calc(100% - 250px);
  }
}