/*

TemplateMo 558 Klassy Cafe

https://templatemo.com/tm-558-klassy-cafe

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #fb5849;
  color: #fff;
}

::-moz-selection {
  background: #fb5849;
  color: #fff;
}

@media (max-width: 991px) {

  html,
  body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-white-button a {
  font-size: 13px;
  color: #fb5849;
  background-color: #fff;
  padding: 12px 25px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.main-white-button a:hover {
  opacity: 0.9;
}

.main-text-button a {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  transition: all .3s;
}

.main-text-button a:hover {
  opacity: 0.9;
}

.section-heading h6 {
  position: relative;
  font-size: 15px;
  color: #fb5849;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-left: 40px;
}

.section-heading h6:before {
  width: 30px;
  height: 1px;
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  background-color: #fb5849;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 20px;
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 900;
  color: #2a2a2a;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff;
  height: 80px !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e !important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849 !important;
}

.background-header .nav li a.active {
  color: #fb5849 !important;
}

.header-area {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #A8000D !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #A8000D !important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #A8000D !important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .cursos-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .cursos-trigger {
  top: 23px;
}

.header-area .main-nav .cursos-trigger span,
.header-area .main-nav .cursos-trigger span:before,
.header-area .main-nav .cursos-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .cursos-trigger span,
.background-header .main-nav .cursos-trigger span:before,
.background-header .main-nav .cursos-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .cursos-trigger span:before,
.header-area .main-nav .cursos-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .cursos-trigger span:before,
.background-header .main-nav .cursos-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .cursos-trigger span:before,
.header-area .main-nav .cursos-trigger span:after {
  content: "";
}

.header-area .main-nav .cursos-trigger span {
  top: 16px;
}

.header-area .main-nav .cursos-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .cursos-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .cursos-trigger.active span,
.header-area .main-nav .cursos-trigger.active span:before,
.header-area .main-nav .cursos-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .cursos-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .cursos-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .cursos-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .cursos-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #A8000D;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #A8000D !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 30px;
  }

  .header-area .cursos-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #A8000D !important;
  }

  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }

  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }

  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }

  .header-area .logo img {
    max-height: 65px;
    /* ajusta según el espacio blanco necesario */
    margin-bottom: 0;
    margin-top: 10px;
    /* Espacio superior opcional */
    display: block;
  }

}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

#top {
  padding-top: 100px;
}

#top .col-lg-4,
#top .col-lg-8 {
  padding: 0px;
}

#top .left-content {
  background-image: url(../images/top-left-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
}

#top .left-content .inner-content {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}

#top .left-content h4 {
  font-family: 'Dancing Script', cursive;
  color: #fff;
  font-size: 54px;
  font-weight: 700;
}

#top .left-content h6 {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 3px;
  margin-top: 5px;
}

#top .left-content .main-white-button {
  margin-top: 25px;
  margin-bottom: 10px;
}

#top .left-content .main-white-button a {
  display: inline-block;
}

/* ==== Main CSS === 
.img-fill {
  width: 100%;
  height: 400px;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-fill img {
  min-height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none;
} */

.img-fill {
  width: 100%;
  height: 350px;
  /* Establece una altura fija, ajusta según tu diseño */
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.img-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mantiene proporción sin distorsionar */
  object-position: center;
}

@media (max-width: 768px) {
  .img-fill {
    height: 200px;
  }
}


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0 !important;
}

.slick-slide {
  float: left
    /* If RTL Make This Right */
  ;
  padding: 0;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill {
  height: 100%;
  max-height: 700px;
  background: #000;
}

.Modern-Slider .item .info>div {
  display: inline-block !important;
  vertical-align: middle;
}

.Modern-Slider .NextArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-25px);
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #A8000D;
  border: 0 none;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color: #FFF;
  z-index: 5;
  outline: none;
  opacity: 0.3;
  transition: all .3s;
}

.Modern-Slider .NextArrow:hover {
  opacity: 1;
}

.Modern-Slider .NextArrow:before {
  content: '\f105';
}

.Modern-Slider .PrevArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-25px);
  left: 30px;
  width: 50px;
  height: 50px;
  background-color: #A8000D;
  border: 0 none;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  font-size: 36px;
  font-family: 'FontAwesome';
  color: #FFF;
  z-index: 5;
  outline: none;
  opacity: 0.3;
  transition: all .3s;
}

.Modern-Slider .PrevArrow:hover {
  opacity: 1;
}

.Modern-Slider .PrevArrow:before {
  content: '\f104';
}

ul.slick-dots {
  display: none !important;
}

.Modern-Slider .item.slick-active {
  animation: Slick-FastSwipeIn 1s both;
}

.Modern-Slider .buttons {
  position: relative;
}

.Modern-Slider {
  background: #000;
}


/* ==== Slick Slider Css Ruls === */
.slick-slider {
  position: relative;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  display: none;
  float: left
    /* If RTL Make This Right */
  ;
  height: 100%;
  min-height: 1px
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent
}


/*
---------------------------------------------
about
---------------------------------------------
*/

#about {
  margin-top: 20px;
  padding: 100px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#about .section-heading h2 {
  padding-right: 120px;
}

#about img {
  width: 100%;
  overflow: hidden;
}

#about .left-text-content p {
  margin-bottom: 25px;
}

#about .right-content {
  margin-left: 30px;
}

#about .right-content .thumb {
  position: relative;
}

#about .right-content .thumb a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  text-align: center;
  background-color: #A8000D;
  color: #fff;
  border-radius: 50%;
  transform: translate(-35px, -35px);
  transition: all .3s;
}

#about .right-content .thumb a:hover {
  opacity: .9;
}


/*
---------------------------------------------
menu
---------------------------------------------
*/

#menu {
  margin-top: 120px;
  background-color: #fffafa;
  padding: 120px 0px;
}

#menu .section-heading {
  margin-bottom: 80px;
}

.custom-card {
  width: 100%;
  max-width: 320px;
  min-height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  margin: 0 auto 24px auto;
}

.custom-card .card-img-top {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.custom-card .card-body {
  background: #A8000D;
  min-height: 70px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.card-title {
  font-size: 1.15rem;
  color: #fff;
  word-break: break-word;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.card-title,
.card-body {
  min-height: 100px;
  /* ajusta al mínimo que soporte tus textos largos */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
}



.title {
  margin: 0;
  padding: 30px 30px 20px 30px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.description {
  padding: 0px 30px;
  color: #fff;
}

#menu .price h6 {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: #A8000D;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  line-height: 70px;
}

#menu .card .main-text-button {
  margin-left: 30px;
  margin-top: 20px;
  padding-bottom: 30px;
}

#menu .owl-menu-item {
  position: relative;
}

#menu .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -80px;
  transform: translateY(5px);
}

#menu .owl-dots {
  display: none;
}

#menu .owl-nav .owl-prev {
  margin-right: 10px;
  outline: none;
}

#menu .owl-nav .owl-prev span,
#menu .owl-nav .owl-next span {
  opacity: 0;
}

#menu .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #A8000D;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
}

#menu .owl-nav .owl-prev {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-prev:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next {
  opacity: 0.75;
  transition: all .5s;
}

#menu .owl-nav .owl-next:hover {
  opacity: 1;
}

#menu .owl-nav .owl-next {
  margin-left: 10px;
  outline: none;
}

#menu .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #A8000D;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
}


/*
---------------------------------------------
chefs
---------------------------------------------
*/

#chefs {
  padding-top: 120px;
}

#chefs .section-heading {
  margin-bottom: 70px;
}

#chefs .section-heading h6 {
  padding-left: 0px;
}

#chefs .section-heading h6:before {
  display: none;
}

#chefs .chef-item {
  text-align: center;
  border: 1px solid #afafaf;
  padding: 5px;
  transition: all .5s;
  border-radius: 3px;
}

#chefs .chef-item:hover {
  border-color: #A8000D;
}

#chefs .chef-item:hover .down-content h4 {
  color: #A8000D;
}

#chefs .chef-item .thumb {
  position: relative;
}

#chefs .chef-item .thumb img {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#chefs .chef-item .thumb .overlay {
  position: absolute;
  background-color: #2a2a2a;
  border-radius: 3px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

#chefs .chef-item .thumb ul.social-icons {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: all .5s;
  opacity: 0;
  visibility: hidden;
}

#chefs .chef-item .thumb ul.social-icons li {
  display: inline-block;
  margin: 0px 5px;
}

#chefs .chef-item .thumb ul.social-icons li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  color: #2a2a2a;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  transition: all .5s;
}

#chefs .chef-item .thumb ul.social-icons li a:hover {
  background-color: #A8000D;
}

#chefs .chef-item:hover .overlay {
  opacity: .9;
  visibility: visible;
}

#chefs .chef-item:hover ul.social-icons {
  opacity: 1;
  visibility: visible;
}

#chefs .chef-item .down-content {
  padding: 20px 0px;
}

#chefs .chef-item .down-content h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
}

#chefs .chef-item .down-content span {
  font-size: 14px;
  color: #2a2a2a;
}


/* 
---------------------------------------------
reservation
--------------------------------------------- 
*/

#reservation .section-heading {
  margin-bottom: 30px;
}

#reservation .section-heading h6 {
  color: #fff;
}

#reservation .section-heading h2 {
  color: #fff;
  font-weight: 700;
}

#reservation .section-heading h6:before {
  background-color: #fff;
}

#reservation p {
  color: #fff;
  margin-bottom: 65px;
}

#reservation {
  margin-top: 120px;
  padding: 120px 0px;
  background-image: url(../images/reservation-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#reservation .phone,
#reservation .message {
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 0px 0px 20px 0px;
}

#reservation .phone i,
#reservation .message i {
  width: 70px;
  height: 70px;
  display: inline-block;
  text-align: center;
  line-height: 70px;
  color: #fff;
  background-color: #A8000D;
  border-radius: 50%;
  font-size: 24px;
  margin-top: -35px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#reservation .phone h4,
#reservation .message h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
}

#reservation .phone span a,
#reservation .message span a {
  font-size: 14px;
  color: #2a2a2a;
  transition: all .3s;
}

#reservation .phone span a:hover,
#reservation .message span a:hover {
  color: #A8000D;
}

#contact {
  margin-left: 30px;
  padding: 45px 30px;
  background-color: #fff;
  border-radius: 5px;
}

#contact h4 {
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  color: #2a2a2a;
  margin-bottom: 30px;
}

.datepicker-days {
  padding: 30px;
  cursor: pointer;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  color: #2a2a2a;
  font-size: 14px;
  border: 1px solid #ddd;
  background-color: #fff;
  width: 100%;
  height: 46px;
  border-radius: 5px;
  outline: none;
  padding-top: 3px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 15px;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #A8000D;
}

.contact-form button {
  margin-top: -10px;
  font-size: 13px;
  color: #fff;
  background-color: #A8000D;
  padding: 12px 25px;
  width: 100%;
  box-shadow: none;
  border: none;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.contact-form button:hover {
  opacity: .9;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form ::-webkit-input-placeholder {
  /* Edge */
  color: #2a2a2a;
}

.contact-form :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #2a2a2a;
}

.contact-form ::placeholder {
  color: #2a2a2a;
}

/*
---------------------------------------------
offers
---------------------------------------------
*/

#offers {
  padding-top: 120px;
}

#offers .section-heading {
  margin-bottom: 70px;
}

#offers .section-heading h6 {
  padding-left: 0px;
}

#offers .section-heading h6:before {
  display: none;
}

#offers .heading-tabs {
  text-align: center;
}

#offers .heading-tabs .main-dark-button {
  text-align: right;
}

#offers #tabs ul {
  padding: 0;
}

#offers #tabs ul li {
  display: inline-block;
  margin: 0px 15px;
}

#offers #tabs ul li:last-child {
  margin-right: 0px;
}

#offers #tabs ul li:first-child {
  margin-left: 0px;
}

#offers #tabs ul li a {
  text-transform: capitalize;
  width: 100%;
  display: inline-block;
  font-size: 15px;
  color: #2a2a2a;
  font-weight: 600;
  transition: all 0.3s;
  text-align: center;
}

#offers #tabs ul li a img {
  display: block;
  margin: 0 auto 15px auto;
}

#offers #tabs ul .ui-tabs-active a {
  color: #A8000D;
  position: relative;
}

#offers #tabs ul .ui-tabs-active span {
  color: #1e1e1e;
}

#offers .tabs-content {
  margin-top: 60px;
  text-align: left;
  display: inline-block;
  transition: all 0.3s;
}

#offers .tabs-content .tab-item {
  position: relative;
  margin-bottom: 60px;
}

#offers .tabs-content img {
  float: left;
  width: 100px;
  max-width: 100px;
  margin-right: 20px;
  border-radius: 5px;
}

#offers .tabs-content h4 {
  padding-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 10px;
  margin-right: 100px;
}

#offers .tabs-content p {
  margin-right: 100px;
}

#offers .tabs-content .left-list {
  margin-right: 15px;
}

#offers .tabs-content .right-list {
  margin-left: 15px;
}

#offers .tabs-content .price h6 {
  position: absolute;
  top: 15px;
  right: 0;
  width: 70px;
  height: 70px;
  background-color: #A8000D;
  display: inline-block;
  text-align: center;
  line-height: 70px;
  border-radius: 3px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}


/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

footer {
  margin-top: 60px;
  padding: 50px 0px;
  background-color: #A8000D;
}

footer .left-text-content p {
  margin-top: 5px;
  color: #fff;
  font-size: 14px;
  text-align: right;
}

footer .right-text-content p {
  color: #fff;
  font-size: 14px;
  margin-right: 15px;
  text-transform: uppercase;
}


footer .right-text-content {
  text-align: left;
  margin-top: 10px;
}

footer .logo {
  text-align: center;
}

footer .right-text-content ul li {
  display: inline-block;
  margin-left: 15px;
}

footer .right-text-content ul li:first-child {
  margin-left: 0px;
}


footer .right-text-content ul li a {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-size: 20px;
  background-color: #fff;
  border-radius: 50%;
  color: #A8000D;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

footer .right-text-content ul li a:hover {
  color: #2a2a2a;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 992px) {
  #top {
    padding-top: 100px;
    height: auto;
  }

  .header-area .main-nav .nav li.submenu:after {
    right: 3px;
  }

  .header-area .main-nav .nav li.submenu {
    padding-right: 15px;
  }

  .header-area .main-nav .nav li {
    padding-right: 5px;
    padding-left: 5px;
  }

  .header-area .main-nav .nav li a {
    font-size: 14px;
    letter-spacing: 0px;
  }

  #top .left-content {
    text-align: center;
    padding: 25% 0px;
  }

  #about .right-content {
    margin-left: 0px;
    margin-top: 30px;
  }

  #chefs .chef-item {
    margin-bottom: 30px;
  }

  #reservation .phone {
    margin-bottom: 60px;
  }

  #contact {
    margin-left: 0px;
    margin-top: 30px;
  }

  #offers .tabs-content .left-list {
    margin-right: 0px;
  }

  #offers .tabs-content .right-list {
    margin-left: 0px;
  }

  /* footer .right-text-content {
    text-align: center;
    margin-bottom: 30px;
  }

  footer .left-text-content p {
    text-align: center;
    margin-top: 30px;
  }

  footer .logo {
    background: #fff;
    padding: 10px 0;
    text-align: center;
    border-radius: 8px;
    /* Opcional, bordes redondeados */
}

footer {
  margin-top: 60px;
  padding: 50px 0;
  background-color: #A8000D;
}

/* Centrado de textos que ya tenías */
footer .right-text-content {
  text-align: center;
  margin-bottom: 30px;
}

footer .left-text-content p {
  text-align: center;
  margin-top: 30px;
}

/* Caja blanca para el logo */
footer .col-lg-4:nth-child(2) {
  background: #fff;
  border-radius: 12px;
  padding: 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .logo img {
  max-height: 70px;
}








#preloader {
  overflow: hidden;
  background-color: #A8000D;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper>div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper>div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper>div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  5% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  5% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}

.brand__item img {
  width: 120px;
  /* Tamaño estándar horizontal */
  height: 100px;
  /* Fija el alto si quieres todos iguales */
  object-fit: contain;
  /* Evita recortes, respeta proporción de logo */
  display: block;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: opacity 0.2s;
  background: #fff;
  /* Asegura fondo blanco uniforme */
}

.brand__item img:hover {
  opacity: 1;
  filter: none;
}

.brand-area {
  background: #fff;
  padding: 20px 0;
}

.titulo-script {
  font-family: 'Great Vibes', cursive;
  font-size: 3rem;
  color: #0d0d0d;
  font-weight: normal;
  letter-spacing: 1px;
  /* ajusta separación si lo necesitas */
}

.card {
  min-width: 150px;
  max-width: 220px;
  margin: auto;
  border-radius: 12px;
}

.card.icon-card {
  min-width: 140px;
  max-width: 170px;
  min-height: 220px;
  max-height: 230px;
  padding: 24px 8px;
  margin: auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metodologia-card {
  max-width: 320px;
  min-height: 370px;
  border-radius: 18px;
  margin: 0 auto 28px auto;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.metodo-body {
  min-height: 200px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.metodo-title {
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1.2;
}

.metodo-text {
  font-size: 1rem;
  line-height: 1.4;
}

.metodologia-card {
  background: #A8000D !important;
}

.metodologia-card .card-body {
  background: transparent !important;
}

.contact-box {
  padding: 24px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.contact-form {
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.contact-box span,
.contact-box a {
  word-break: break-all;
  white-space: pre-line;
  display: inline-block;
}

/* TIPOGRAFÍA DEL BANNER IZQUIERDO */
#top .left-content h4 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  font-size: 48px !important;
  line-height: 1.1;
  color: #ffffff !important;
  margin-bottom: 20px;
}

#top .left-content h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: 1px;
  line-height: 1.4;
  color: #ffffff !important;
  text-transform: uppercase;
}

/* TÍTULO DE LA SECCIÓN DE EMPRESAS (MISMA TIPOGRAFÍA CORPORATIVA) */
.titulo-script {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  /* ajustable */
  letter-spacing: 0.5px;
  color: #0d0d0d;
  text-transform: none;
}

.nav li.submenu>a:after {
  display: none !important;
}

/* --- Tipografía Poppins para sección Metodología --- */
#metodologia h2,
#metodologia h5,
#metodologia p,
#metodologia .metodo-title,
#metodologia .metodo-text {
  font-family: 'Poppins', sans-serif !important;
}

/* Ajustes estéticos */
#metodologia .metodo-title {
  font-weight: 700 !important;
  font-size: 1.25rem;
}

#metodologia .metodo-text {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
}

.metodologia-card img {
  height: 200px;
  /* MISMA ALTURA PARA TODAS */
  width: auto;
  /* Mantiene proporción correcta */
  object-fit: contain;
  /* Evita que se deformen */
  margin-top: 20px;
  margin-bottom: 10px;
}

.metodologia-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.metodo-body {
  flex-grow: 1;
}

/* ================================
   AJUSTES GENERALES RESPONSIVOS
   ================================ */

/* Todas las imágenes responsivas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Contenedores siempre ajustados */
.container,
.container-fluid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ================================
   LOGO RESPONSIVO
   ================================ */

.header-area .logo img {
  max-height: 65px;
  width: auto;
  max-width: 100%;
  margin-bottom: 0;
  margin-top: 10px;
  display: block;
}

/* Para pantallas pequeñas, reduce un poco más el logo */
@media (max-width: 768px) {
  .header-area .logo img {
    max-height: 50px;
  }
}

/* ================================
   SLIDER RESPONSIVO
   ================================ */

/* Contenedor del slide */
.img-fill {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Mantiene proporción moderna y responsiva */
  overflow: hidden;
  position: relative;
  display: block;
  text-align: center;
}

/* Imagen del slide */
.img-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Se ajusta sin deformarse */
  object-position: center;
}

/* Proporción especial para pantallas móviles */
@media (max-width: 768px) {
  .img-fill {
    aspect-ratio: 4 / 3;
    /* Más alto en móvil para que no se recorte tanto */
  }
}

/* ================================
   TEXTO Y COLUMNAS EN MÓVIL
   ================================ */

@media (max-width: 768px) {

  /* Asegura que las columnas no queden apretadas */
  .col-lg-4,
  .col-lg-8,
  .col-md-6,
  .col-md-12 {
    width: 100%;
    max-width: 100%;
  }

  /* Centra el texto del banner si es necesario */
  .left-content .inner-content {
    text-align: center;
  }
}

/* ============================================
   AJUSTE DEFINITIVO DEL TEXTO DEL BANNER MÓVIL
   ============================================ */

@media (max-width: 768px) {

  /* TITULAR PRINCIPAL */
  .main-banner h1,
  .main-banner h2 {
    font-size: 22px !important;
    /* Antes 28 → ahora más pequeño */
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }

  /* SUBTÍTULO */
  .main-banner h4 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
    text-align: center !important;
  }

  /* TEXTO PEQUEÑO */
  .main-banner h6 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-top: 5px !important;
    text-align: center !important;
  }

  /* Reduce el padding vertical del bloque verde */
  .left-content .inner-content {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

/* ================================
   CORRECCIÓN DEFINITIVA HEADER MÓVIL
================================ */

@media (max-width: 768px) {

  /* Ajusta altura del header */
  .header-area {
    height: 70px !important;
    padding: 0 10px !important;
  }

  /* LOGO más pequeño y centrado verticalmente */
  .header-area .logo img {
    max-height: 45px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ícono hamburguesa */
  .cursos-trigger {
    display: block !important;
    position: absolute;
    right: 15px;
    top: 18px;
    width: 35px;
    height: 35px;
    z-index: 9999;
  }

  .cursos-trigger span,
  .cursos-trigger span:before,
  .cursos-trigger span:after {
    background: #000 !important;
    height: 3px;
  }

  /* Menú oculto hasta tocar hamburguesa */
  .main-nav .nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
  }

  .main-nav .nav li a {
    text-align: center;
    padding: 15px 0 !important;
  }

  /* ----------------------------- */
  /* FIX TEXTO DEL BANNER EN MOVIL */
  /* ----------------------------- */

  @media (max-width: 768px) {

    /* Contenedor del texto del banner */
    .left-content .inner-content {
      text-align: center;
      padding: 0 10px;
    }

    .left-content .inner-content h4 {
      font-size: 18px !important;
      line-height: 22px !important;
      margin-bottom: 6px !important;
    }

    .left-content .inner-content h6 {
      font-size: 13px !important;
      line-height: 16px !important;
    }

    /* Ajuste del alto del slider en móvil */
    .img-fill {
      height: 180px !important;
    }

    /* Ajuste del texto para que no empuje al slider */
    #top .col-lg-4 {
      margin-bottom: 15px;
    }
  }

  /* FIX DEFINITIVO PARA EL TÍTULO DEL BANNER */
  #top .left-content h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 32px !important;
    /* Ajusta si quieres más pequeño en móvil */
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-align: center !important;
  }

  @media (max-width: 768px) {
    #top .left-content h4 {
      font-size: 22px !important;
    }
  }

  /* ============================================
   HEADER FIJO SIN MOVIMIENTO EN MÓVIL
============================================ */

  .header-area {
    height: 80px !important;
    display: flex;
    align-items: center;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    background: #fff;
  }

  /* LOGO SIEMPRE FIJO */
  .header-area .logo img {
    max-height: 55px;
    width: auto;
    margin: 0 !important;
  }

  /* HAMBURGUESA FIJA Y ABSOLUTA */
  .cursos-trigger {
    display: none;
  }

  @media (max-width: 768px) {

    .cursos-trigger {
      display: block !important;
      position: absolute;
      right: 15px;
      top: 22px;
      z-index: 10000;
      width: 35px;
      height: 35px;
      cursor: pointer;
    }

    .cursos-trigger span,
    .cursos-trigger span:before,
    .cursos-trigger span:after {
      background: #000 !important;
      height: 3px;
      width: 100%;
      display: block;
      position: absolute;
      transition: .3s;
      content: "";
    }

    .cursos-trigger span {
      top: 16px;
    }

    .cursos-trigger span:before {
      top: -10px;
    }

    .cursos-trigger span:after {
      top: 10px;
    }

    /* ANIMACIÓN A "X" */
    .cursos-trigger.active span {
      background: transparent;
    }

    .cursos-trigger.active span:before {
      transform: rotate(45deg) translate(6px, 6px);
    }

    .cursos-trigger.active span:after {
      transform: rotate(-45deg) translate(6px, -6px);
    }

    /* ===============================
       MENÚ DESPLEGABLE OVERLAY
    =============================== */
    .main-nav .nav {
      display: none;
      position: fixed !important;
      top: 80px;
      /* justo debajo del header */
      left: 0;
      width: 100%;
      background: #fff;
      z-index: 9998 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .main-nav .nav li {
      width: 100%;
      border-bottom: 1px solid #eee;
      text-align: center;
    }

    .main-nav .nav li a {
      padding: 15px 0 !important;
      display: block;
      font-size: 17px;
      color: #000 !important;
    }
  }

  /* ============================================
   HEADER FIJO E INAMOVIBLE
============================================ */

  .header-area {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: visible !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000 !important;
    background: #fff !important;
    display: flex;
    align-items: center;
  }

  /* EVITA QUE EL MENU EMPUJE AL LOGO */
  .header-area .main-nav {
    height: 80px !important;
    min-height: 80px !important;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
  }

  /* LOGO FIJO Y NO MOVIBLE */
  .header-area .logo img {
    max-height: 55px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ============================================
   MENU MÓVIL SUPERPUESTO (NO AFECTA AL HEADER)
============================================ */

  @media (max-width: 768px) {

    /* Hamburguesa fija dentro del header */
    .cursos-trigger {
      position: absolute !important;
      right: 15px !important;
      top: 22px !important;
      z-index: 20000 !important;
      display: block !important;
    }

    /* EL MENÚ YA NO ESTÁ DENTRO DEL FLUJO */
    .main-nav .nav {
      position: fixed !important;
      top: 80px !important;
      /* debajo del header */
      left: 0;
      right: 0;
      background: #fff;
      width: 100%;
      display: none;
      z-index: 19999 !important;
      padding: 0;
      margin: 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    /* Evita que cada item empuje contenido en el header */
    .main-nav .nav li {
      width: 100%;
      border-bottom: 1px solid #eee;
      text-align: center;
    }

    .main-nav .nav li a {
      padding: 16px 0 !important;
      font-size: 18px;
      display: block;
      color: #000 !important;
    }
  }