/* OCS Silex - estilo corporativo editable
   Este archivo se carga al final para respetar tu HTML original y aplicar el look del manual OCS. */
:root {
  --ocs-blue: #1052C8;
  --ocs-blue-soft: #1482D0;
  --ocs-silver: #AAB1B1;
  --ocs-dark: #050608;
  --ocs-black: #0B0D10;
  --ocs-gray: #1C1F23;
  --ocs-gray-2: #2B2F36;
  --ocs-text: #D9D9D9;
  --ocs-white: #FFFFFF;
}
html { scroll-behavior: smooth; }
body {
  background: linear-gradient(135deg, var(--ocs-dark), var(--ocs-gray));
  color: var(--ocs-text);
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.header .navmenu a,
.btn-get-started,
.ocs-btn,
.section-title h2 {
  font-family: 'Montserrat', 'Poppins', sans-serif;
}
/* Header */
.header,
.header.header-scrolled,
.footer.dark-background,
.dark-background {
  background: linear-gradient(135deg, #050608 0%, #11151B 52%, #1C1F23 100%) !important;
}
.header {
  min-height: 86px;
  border-bottom: 1px solid rgba(170,177,177,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.36);
}
.header .logo img {
  max-height: 62px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.header .logo h1,
.header .logo .sitename,
.header .logo span { display: none !important; }
.navmenu a,
.navmenu a:focus {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.navmenu .active,
.navmenu a:hover,
.navmenu li:hover > a {
  color: #fff !important;
  background: transparent !important;
  border-bottom: 3px solid var(--ocs-blue);
  border-radius: 0;
}
.mobile-nav-toggle { color: #fff !important; }
/* Hero principal */
.hero,
.hero.section,
#hero {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(5,6,8,.92), rgba(28,31,35,.82)) !important;
  position: relative;
  overflow: hidden;
}
#hero:before,
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 33%, rgba(16,82,200,.20), transparent 35%),
    linear-gradient(180deg, rgba(5,6,8,.18), rgba(5,6,8,.82));
  z-index: 1;
  pointer-events: none;
}
#hero .info,
.hero .info,
#hero .container,
.hero .container { position: relative; z-index: 2; }
#hero-carousel,
.hero #hero-carousel { opacity: .28; }
#hero-carousel:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,6,8,.75), rgba(28,31,35,.72));
  z-index: 1;
}
.ocs-hero-logo-static {
  display: block;
  margin: 0 auto 32px;
  max-width: min(520px, 90%);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.65));
}
.hero h2,
#hero h2 {
  color: #fff !important;
  font-size: clamp(2.1rem, 5vw, 4.7rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 4px;
  line-height: 1.08;
  text-shadow: 0 8px 26px rgba(0,0,0,.65);
}
.hero h2:after,
#hero h2:after,
.section-title h2:after,
.page-title h1:after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, var(--ocs-blue), var(--ocs-silver));
  border-radius: 20px;
}
.hero p,
#hero p {
  color: var(--ocs-text) !important;
  font-size: 1.05rem;
  line-height: 1.75;
}
.btn-get-started,
button[type="submit"] {
  background: var(--ocs-blue) !important;
  border: 1px solid var(--ocs-blue) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .9px;
  transition: .25s ease;
}
.btn-get-started:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(16,82,200,.28);
}
/* Secciones */
section,
.section,
.get-started,
.constructions,
.projects,
.services,
.contact {
  background: linear-gradient(135deg, #050608 0%, #11151B 50%, #1C1F23 100%) !important;
  color: var(--ocs-text) !important;
}
.light-background,
.alt-services,
.features,
.recent-blog-posts,
.blog-posts,
.blog-details,
.starter-section {
  background: linear-gradient(135deg, #11151B 0%, #1C1F23 55%, #2B2F36 100%) !important;
}
.section-title h2,
.section-title h3,
.section-title p,
.content h3,
.content p,
.card-title,
.service-item h3,
.service-item p,
.portfolio-info h4,
.portfolio-info p,
.contact h3,
.contact p {
  color: var(--ocs-text) !important;
}
.section-title h2,
.content h3,
.page-title h1 {
  color: #fff !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.card-item,
.service-item,
.info-item,
.portfolio-content,
.post-item,
.widgets-container,
.blog-details .article {
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(170,177,177,.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.28) !important;
  overflow: hidden;
}
.service-item,
.info-item { padding: 32px !important; }
.service-item .icon,
.info-item i,
.service-item i {
  color: var(--ocs-blue) !important;
}
.service-item .icon:before { background: rgba(16,82,200,.15) !important; }
.card-item:hover,
.service-item:hover,
.portfolio-content:hover,
.info-item:hover {
  transform: translateY(-4px);
  border-color: rgba(16,82,200,.55) !important;
}
.portfolio-content img,
.card-bg img {
  filter: saturate(.9) contrast(1.05);
}
.portfolio-info {
  background: linear-gradient(180deg, rgba(5,6,8,.05), rgba(5,6,8,.86)) !important;
}
.portfolio-filters li {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(170,177,177,.20);
  color: #fff !important;
  border-radius: 999px;
  padding: 8px 16px !important;
}
.portfolio-filters .filter-active,
.portfolio-filters li:hover {
  background: var(--ocs-blue) !important;
  color: #fff !important;
}
/* Page title internas */
.page-title {
  padding-top: 145px !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}
.page-title:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,6,8,.90), rgba(28,31,35,.80));
}
.page-title .container { position: relative; z-index: 2; }
.breadcrumbs a,
.breadcrumbs .current { color: var(--ocs-text) !important; }
/* Footer */
.footer {
  border-top: 1px solid rgba(170,177,177,.18);
  background: linear-gradient(135deg, #050608 0%, #11151B 52%, #1C1F23 100%) !important;
}
.footer .sitename,
.footer h4,
.footer strong { color: #fff !important; }
.footer p,
.footer a,
.footer span { color: var(--ocs-text) !important; }
.footer a:hover { color: var(--ocs-blue-soft) !important; }
.scroll-top { background: var(--ocs-blue) !important; }
/* Ayudas para edición visual */
.silex-note {
  margin: 0;
  padding: 10px 14px;
  background: rgba(16,82,200,.12);
  color: #d9d9d9;
  border-left: 3px solid var(--ocs-blue);
  font-size: 13px;
}
@media (max-width: 768px) {
  .header .logo img { max-height: 46px; }
  .ocs-hero-logo-static { max-width: 280px; }
  .hero h2, #hero h2 { font-size: 2.3rem !important; letter-spacing: 2px; }
}
/* Hero usando solamente el carrusel como fondo */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: none !important;
  background-image: none !important;
}

/* Carrusel ocupa todo el fondo */
.hero #hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Slides a pantalla completa */
.hero #hero-carousel .carousel-inner,
.hero #hero-carousel .carousel-item {
  width: 100%;
  height: 100vh;
}

/* Imagen del carrusel visible */
.hero #hero-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
}

/* Quitar fondo/capa extra del hero */
.hero::before {
  background: transparent !important;
}

/* Dejar solo una capa ligera encima del carrusel para leer texto */
.hero .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent !important;
  z-index: 2;
}

/* Contenido encima del carrusel */
.hero .info {
  position: relative;
  z-index: 5;
  min-height: 100vh;
}

/* Flechas encima */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 6;
}