/* ============================================================
   Dark professional theme override — ETSA
   Load AFTER style.css and responsive.css
   ============================================================ */
:root{
  --bg:        #1e1e1e;
  --bg-alt:    #242424;
  --bg-card:   #2b2b2d;
  --border:    rgba(255,255,255,0.08);
  --text:      #eeeeee;
  --text-muted:#9a9a9e;
  --accent:    #d35c41;
  --accent-soft: rgba(211,92,65,0.14);
  --accent-secondary: #ff5745;
}

body{
  background: var(--bg) !important;
  color: var(--text-muted) !important;
}

h1,h2,h3,h4,h5,h6,
.main_title h2,
.area-heading h2,
.area-heading h4{
  color: var(--text) !important;
}

a{ color: inherit; }

/* ---------- header ---------- */
.header_area{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
}
.top_menu{
  background: var(--bg-alt) !important;
  color: var(--text-muted) !important;
}
.top_menu a, .top_menu span{ color: var(--text-muted) !important; }
.header_area .navbar{ background: transparent !important; }
.header_area .navbar .nav .nav-item .nav-link{
  color: var(--text) !important;
}
.header_area .navbar .nav .nav-item .nav-link:hover,
.header_area .navbar .nav .nav-item.active .nav-link{
  color: var(--accent) !important;
}
.header_area .navbar .nav .nav-item.submenu ul{
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
}
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link{
  color: var(--text-muted) !important;
}
.header_social a{ color: var(--text-muted) !important; }

/* ---------- hero slider (Owl Carousel) ---------- */
.home_banner_area .banner_inner{ overflow: hidden; }
.home_banner_area .banner_inner .hero-slider,
.home_banner_area .banner_inner .hero-slider .owl-stage-outer,
.home_banner_area .banner_inner .hero-slider .owl-stage,
.home_banner_area .banner_inner .hero-slider .owl-item{
  height: 100%;
}
.home_banner_area .banner_inner .hero-slider{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home_banner_area .banner_inner .hero-slide{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
.home_banner_area .banner_inner .hero-slide-bg{
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(30px) brightness(0.95) saturate(1.05);
  transform: scale(1.1);
}

.banner_inner{
  position: relative;
}
.banner_inner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.08) 0%, rgba(10,10,10,0.0) 40%, rgba(10,10,10,0.18) 100%);
  z-index: 1;
  pointer-events: none;
}
.home_banner_area .banner_inner .hero-slide-fg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  filter: brightness(1.15) saturate(1.06) contrast(1.02);
}
.home_banner_area .banner_inner::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.24) 32%, rgba(8,8,8,0) 58%),
    linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.28) 100%);
  pointer-events: none;
  z-index: 1;
}
.home_banner_area .banner_inner .hero-slider .owl-nav .owl-prev,
.home_banner_area .banner_inner .hero-slider .owl-nav .owl-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20,20,20,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  z-index: 5;
  transition: background .2s ease;
  cursor: pointer;
}
.home_banner_area .banner_inner .hero-slider .owl-nav .owl-prev{ left: 24px; }
.home_banner_area .banner_inner .hero-slider .owl-nav .owl-next{ right: 24px; }
.home_banner_area .banner_inner .hero-slider .owl-nav .owl-prev:hover,
.home_banner_area .banner_inner .hero-slider .owl-nav .owl-next:hover{
  background: var(--accent);
}
.home_banner_area .banner_inner .hero-slider .owl-dots{
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.home_banner_area .banner_inner .hero-slider .owl-dots .owl-dot span{
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all .2s ease;
}
.home_banner_area .banner_inner .hero-slider .owl-dots .owl-dot.active span{
  background: var(--accent);
  width: 26px;
  border-radius: 5px;
}
.home_banner_area .banner_content{
  position: relative;
  z-index: 2;
}
.home_banner_area .banner_content h1,
.home_banner_area .banner_content h2,
.home_banner_area .banner_content p{
  color: var(--text) !important;
}
.hero-banner{ background: var(--bg) !important; }
.hero-banner h1, .hero-banner h2, .hero-banner p, .hero-banner-icon{
  color: var(--text) !important;
}

/* ---------- buttons ---------- */
.main_btn, .button, .button-contactForm{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.main_btn:hover, .button:hover, .button-contactForm:hover{
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}

/* ---------- about / giardini / company ---------- */
.about-area{
  background: var(--bg) !important;
}
.about-area:nth-of-type(even){
  background: var(--bg-alt) !important;
}
.about-content, .about-content p, .about-content li{
  color: var(--text-muted) !important;
}
.about-content h1, .about-content h2, .about-content h3, .about-content h4{
  color: var(--text) !important;
}
.line{ background: var(--accent) !important; }

/* ---------- services ---------- */
.service-area{ background: var(--bg-alt) !important; }
.single-service{
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color .25s ease, transform .25s ease;
}
.single-service:hover{
  border-color: var(--accent);
  transform: translateY(-4px);
}
.single-service .service-icon{ color: var(--accent) !important; }
.single-service .service-content h4,
.single-service .service-content h5{ color: var(--text) !important; }
.single-service .service-content p{ color: var(--text-muted) !important; }

/* ---------- stats / counter ---------- */
.number-area{
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.number-area h2, .number-area h3, .number-area .counter{
  color: var(--accent) !important;
}
.number-area p, .number-area span{ color: var(--text-muted) !important; }

/* ---------- portfolio / projects ---------- */
.portfolio_area{ background: var(--bg-alt) !important; }
.filters.portfolio-filter li{
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.filters.portfolio-filter li.active{
  color: var(--accent) !important;
}
.single_portfolio{
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
}
.single_portfolio .short_info{
  background: var(--bg-card) !important;
}
.single_portfolio .short_info h3,
.single_portfolio .short_info h4,
.single_portfolio .short_info a{
  color: var(--text) !important;
}
.single_portfolio .short_info span,
.single_portfolio .short_info p{
  color: var(--text-muted) !important;
}

/* ---------- news / blog ---------- */
.blog-area{ background: var(--bg) !important; }
.single-blog{
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
}
.single-blog h3, .single-blog h4, .single-blog a{ color: var(--text) !important; }
.single-blog .short_details, .single-blog p, .single-blog .meta-top{
  color: var(--text-muted) !important;
}

/* ---------- contact ---------- */
.contact-section{ background: var(--bg-alt) !important; }
.contact-title, .contact-title h2{ color: var(--text) !important; }
.form-contact .form-control{
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.form-contact .form-control::placeholder{ color: var(--text-muted) !important; }
.contact-info, .contact-info h4, .contact-info h5, .contact-info p, .media-body{
  color: var(--text-muted) !important;
}
.contact-info__icon{ color: var(--accent) !important; }
.contact-info h4, .contact-info h5{ color: var(--text) !important; }

/* ---------- footer ---------- */
.footer-area{
  background: #1a1a1a !important;
  border-top: 1px solid var(--border);
}
.footer-area h4, .footer-area h5{ color: var(--text) !important; }
.footer-area p, .footer-area li, .footer-area span, .footer-area a{
  color: var(--text-muted) !important;
}
.footer-area a:hover{ color: var(--accent) !important; }
.single-footer-widget input{
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* ---------- misc ---------- */
.tags .tag_btn{
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
::selection{ background: var(--accent); color: #fff; }


/* ---------- sticky header fix ---------- */
.header_area.navbar_fixed{
  background: var(--bg) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.header_area.navbar_fixed .navbar .nav .nav-item .nav-link{
  color: var(--text) !important;
}
.header_area.navbar_fixed .navbar .nav .nav-item .nav-link:hover,
.header_area.navbar_fixed .navbar .nav .nav-item.active .nav-link{
  color: var(--accent) !important;
}

/* ---------- logo (opaque white-bg art -> chip on dark header) ---------- */
.navbar-brand{
  background: transparent;
  padding: 8px 16px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

/* ---------- news/blog card text panel ---------- */
.single-blog .short_details{
  background: var(--bg-card) !important;
}


/* Fix portfolio grid image distortion - crop instead of stretch */
.single_portfolio img {
    object-fit: cover;
    object-position: center;
}


/* These 3 photos are extremely panoramic (2.2:1 to 2.5:1) - cover crops off too much of the facade, so show them uncropped instead */
.single_portfolio img[src*="due_terre_hq"],
.single_portfolio img[src*="las_toscanas"],
.single_portfolio img[src*="/laurelty/"] {
    object-fit: contain;
    background-color: rgb(43, 43, 45);
}


/* ---------- Brandboard ETSA alignment (colores, tipografia, titulos) ---------- */
.line::before, .line::after{ background-color: var(--accent) !important; }
.dn_btn i{ color: var(--accent) !important; }
b{ color: var(--accent) !important; }
.main_btn:hover{ background:#fff !important; color: var(--accent) !important; border-color: var(--accent) !important; }
body, p, li, .header_area .navbar .nav .nav-item .nav-link, .main_btn{
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6,.line{
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
}
.line{ letter-spacing: 1px; }


/* ---------- Sticky nav + logo color swap on scroll ---------- */
.logo-svg{ transition: opacity .2s ease; }
.logo-white-v{ display: block; }
.logo-color-v{ display: none; }
.main_menu.sticky-nav{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: #1e1e1e !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.main_menu.sticky-nav .logo-white-v{ display: block; }
.main_menu.sticky-nav .logo-color-v{ display: none; }
.main_menu.sticky-nav .navbar .nav .nav-item .nav-link{ color: #eeeeee !important; }
.main_menu.sticky-nav .navbar .nav .nav-item .nav-link:hover,
.main_menu.sticky-nav .navbar .nav .nav-item.active .nav-link{ color: var(--accent) !important; }
.main_menu.sticky-nav .icon-bar{ background-color: #eeeeee !important; }


/* ===== Diagramacion brandboard (pag. 15 y 19) ===== */
.area-heading h2,
.area-heading h3,
.area-heading h4{
  text-transform: uppercase;
  letter-spacing: 1.5px;
}



.hero-eyebrow{
  display: inline-block;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

.banner_content h3{
  text-transform: uppercase;
  letter-spacing: 1px;
}

.banner_content .main_btn{
  border-radius: 999px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 36px;
}

.single-service .service-icon svg{
  width: 68px;
  height: 68px;
}

.single-service .service-content h5{
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
}


/* ---------- hero text: smaller, bottom-left ---------- */
.home_banner_area{
  min-height: calc(100vh - 123px) !important;
}
.home_banner_area .banner_inner{
  min-height: calc(100vh - 123px) !important;
  align-items: flex-end !important;
  padding-bottom: 56px;
  box-sizing: border-box;
}
.home_banner_area .banner_content{
  text-align: left !important;
  max-width: 640px;
}
.home_banner_area .banner_inner .banner_content .hero-eyebrow,
.home_banner_area .banner_inner .banner_content span.hero-eyebrow{
  font-size: 14px !important;
  padding: 6px 14px !important;
  margin-bottom: 16px !important;
}
.home_banner_area .banner_inner .banner_content h3{
  font-size: 32px !important;
  line-height: 1.28 !important;
  margin-bottom: 4px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.55);
}
.home_banner_area .banner_inner .banner_content .hero-eyebrow::after{
  display: none !important;
}
.home_banner_area .banner_inner .banner_content h3 .hero-tagline{
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.home_banner_area .banner_inner .banner_content .main_btn{
  margin-top: 22px !important;
}
@media (max-width: 767px){
  .home_banner_area{ min-height: calc(100vh - 80px) !important; }
  .home_banner_area .banner_inner{ min-height: calc(100vh - 80px) !important; padding-bottom: 26px; }
  .home_banner_area .banner_inner .banner_content h3{ font-size: 22px !important; }
  .home_banner_area .banner_inner .banner_content h3 .hero-tagline{ font-size: 12px; margin-bottom: 4px; }
  .home_banner_area .banner_inner .banner_content .hero-eyebrow{ margin-bottom: 12px !important; }
  .home_banner_area .banner_inner .banner_content .main_btn{ margin-top: 14px !important; }
}