/* =========================
   THEME 4H (Carretera/Construcción)
   ========================= */
:root{
  --brand: #E10600;        /* rojo logo */
  --brand-dark:#8B0C07;    /* rojo profundo */
  --ink:#1A1B1E;           /* negro/charcoal (asfalto oscuro) */
  --steel:#6C757D;         /* gris texto/íconos */
  --concrete:#F2F3F5;      /* gris claro cemento */
  --line:#D8DBE0;          /* línea UI */
  --safety:#FFC107;        /* amarillo seguridad */
  --white:#FFFFFF;
}

/* Base */
html, body{
  font-family:"Open Sans",sans-serif;
  text-rendering:optimizeLegibility !important;
  -webkit-font-smoothing:antialiased !important;
  color:var(--steel);
  background:#fff;
  font-weight:400;
  width:100% !important; height:100% !important;
}
h2,h3,h4{ font-family:"Raleway",sans-serif; color:var(--ink); }
h2{ text-transform:uppercase; margin:0 0 20px; font-weight:800; font-size:36px; }
h3{ font-size:20px; font-weight:600; }
h4{ font-size:18px; font-weight:600; }
h5{ text-transform:uppercase; font-weight:700; line-height:20px; }
p{ font-size:15px; }
p.intro{ margin:12px 0 0; line-height:24px; }

/* Links */
a{ color:var(--brand); font-weight:500; }
a:hover,a:focus{ text-decoration:none; color:var(--brand-dark); }

/* Lists */
ul,ol{ list-style:none; padding:0; }

/* Divider */
hr{
  height:2px; width:70px; text-align:center; position:relative;
  background:var(--brand); margin-bottom:20px; border:0;
}

/* =========================
   NAVIGATION
   ========================= */
#menu{
  padding:15px; transition:all .3s ease;
}
#menu.navbar-default{
  background:var(--white);
  border-color:transparent;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
#menu a.navbar-brand{
  font-family:"Raleway",sans-serif;
  font-size:24px; font-weight:800;
  color:var(--ink);
  text-transform:uppercase; letter-spacing:.5px;
}
#menu.navbar-default .navbar-nav>li>a{
  font-family:"Lato",sans-serif;
  text-transform:uppercase; color:var(--ink);
  font-size:15px; font-weight:500;
  padding:8px 2px; border-radius:0; margin:9px 20px 0;
  position:relative;
}
#menu.navbar-default .navbar-nav>li>a:after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px;
  background:linear-gradient(90deg, var(--safety) 0%, var(--brand) 100%);
  transition:width .2s;
}
#menu.navbar-default .navbar-nav>li>a:hover:after{ width:100%; }
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{ background:transparent; }
.navbar-default .navbar-nav>.active>a:after,
.navbar-default .navbar-nav>.active>a:hover:after,
.navbar-default .navbar-nav>.active>a:focus:after{
  display:block !important; position:absolute !important;
  left:0 !important; bottom:-1px !important; width:100% !important; height:2px !important;
  background:linear-gradient(90deg, var(--safety) 0%, var(--brand) 100%) !important;
  content:"" !important;
}
.navbar-toggle{ border-radius:0; }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
  background:var(--white); border-color:var(--brand);
}
.navbar-default .navbar-toggle:hover>.icon-bar{ background:var(--brand); }

.section-title{ margin-bottom:70px; }
.section-title h2{ position:relative; margin-top:10px; margin-bottom:15px; padding-bottom:15px; }
.section-title h2::after{
  position:absolute; content:""; height:4px; width:60px; bottom:0;
  margin-left:-30px; left:50%;
  background:var(--brand);
}
.section-title p{ font-size:18px; color:var(--steel); }

/* =========================
   BUTTONS
   ========================= */
.btn-custom{
  font-family:"Raleway",sans-serif; text-transform:uppercase;
  color:#fff !important; background:var(--brand) !important;
  padding:14px 34px; letter-spacing:1px; margin:0; font-size:15px; font-weight:700;
  border-radius:12px; transition:all .25s linear; border:0;
  box-shadow:0 6px 14px rgba(225,6,0,.15);
}
.btn-custom:hover,.btn-custom:focus,.btn-custom:active{
  background:var(--brand-dark) !important; color:#fff !important;
}
.btn:active,.btn.active{ background-image:none; outline:0; box-shadow:none; }
a:focus,.btn:focus{ outline:none; }

/* Botón claro */
.btn-default{ background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:10px; }
.btn-default:hover{ border-color:var(--brand); color:var(--brand); }

/* =========================
   HEADER (Hero)
   ========================= */
/* Contenedor del hero */
.intro{
  position: relative;
  width: 100%;
  height: 70vh;           /* altura prudente; ajusta a 60vh/600px si prefieres */
  min-height: 520px;
  overflow: hidden;
  background: #000;       /* para que no se note si hay barras del contain */
}

/* Video: queremos verlo completo, sin zoom => contain */
.video-background{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.video-background.video-contain{
  object-fit: cover;     /* muestra TODO el cuadro del video */
  background: #000;        /* “letterbox” discreto si la relación no coincide */
}

/* Capa oscura para contraste */
.intro .overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45));
  z-index: 2;
}

/* Layout del texto + logo */
.intro-head{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;               /* espacio entre texto y logo */
  padding-top: 14vh;       /* baja/centra el bloque en la sección */
  text-align: left;
}

/* Bloque de texto */
.intro-copy{
  max-width: 760px;
}

.intro h1{
  font-family:"Raleway",sans-serif;
  color:#fff;
  font-size: 82px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.05;
}
.intro p{
  color:#fff;
  font-size: 22px;
  font-weight: 300;
  line-height: 30px;
  margin: 0 0 28px;
}

/* Logo a la derecha */
.intro-logo{
  max-width: 220px;        /* ajusta el tamaño del logo aquí */
  width: 20vw;             /* responsivo */
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

/* Botones */
.intro-cta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn.btn-outline{
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}
.btn.btn-outline:hover{
  background: rgba(255,255,255,.12);
}

/* Responsive */
@media (max-width: 992px){
  .intro{ height: 60vh; min-height: 500px; }
  .intro-head{ flex-direction: column; text-align: center; padding-top: 12vh; }
  .intro-logo{ width: 180px; max-width: 180px; }
  .intro h1{ font-size: 56px; }
  .intro p{ font-size: 18px; line-height: 26px; }
}
@media (max-width: 576px){
  .intro{ height: 56vh; min-height: 440px; }
  .intro h1{ font-size: 40px; }
  .intro-logo{ width: 150px; }
}


/* =========================
   FEATURES
   ========================= */
#features{ background:var(--concrete); }
#features i.fa{
  font-size:38px; margin-bottom:20px; transition:all .3s; color:#fff;
  width:100px; height:100px; padding:30px 0; border-radius:50%;
  background:var(--brand);
  box-shadow:8px 8px 14px rgba(0,0,0,.06);
}

/* =========================
   ABOUT
   ========================= */
#about{ padding:100px 0; }
#about h3{ font-size:22px; margin:0 0 20px; }
#about h2{ position:relative; margin-bottom:15px; padding-bottom:15px; }
#about h2::after{ position:absolute; content:""; background:var(--brand); height:4px; width:60px; bottom:0; left:0; }
#about .about-text li{ margin-bottom:6px; margin-left:6px; list-style:none; padding:0; }
#about .about-text li:before{
  content:"\f00c"; font-family:"FontAwesome"; color:var(--brand); font-size:11px; font-weight:300; padding-right:8px;
}
#about img{
  width:520px; margin-top:10px; background:#fff; border-right:0;
  box-shadow:0 0 50px rgba(0,0,0,.06);
}
#about p{ line-height:24px; margin:30px 0; }

/* =========================
   SERVICES
   ========================= */
#services{
  padding:100px 0;
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 35%, var(--concrete) 100%);
  color:var(--ink);
}
#services .service-desc{ margin:10px 10px 20px; }
#services h2{ color:var(--ink); }
#services .section-title h2::after{
  background:var(--brand);
}
/* Iconos circulares (si los usas) */
#services i.fa{
  font-size:42px; width:120px; height:120px; padding:40px 0;
  background:var(--brand); border-radius:50%; color:#fff;
  box-shadow:10px 10px 12px rgba(225,6,0,.12);
}
#services h3{ font-weight:600; padding:5px 0; color:var(--ink); }
#services p{ color:var(--steel); }
#services .service-desc{ margin-bottom:40px; }

/* Tabs/botones de servicios (cuando secciones dinámicas) */
.btn-group .btn{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:10px; margin:0 6px 12px 0;
}
.btn-group .btn.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.btn-group .btn:hover{ border-color:var(--brand); color:var(--brand); }

/* =========================
   PORTFOLIO (Galería)
   ========================= */
#portfolio{ padding:100px 0; }
.portfolio-item{ margin:1px -15px 0 -14px; padding:0; }
.portfolio-item .hover-bg{ overflow:hidden; position:relative; margin:0; }
.hover-bg .hover-text{
  position:absolute; text-align:center; margin:0 auto; color:#fff;
  background:linear-gradient( to right, rgba(225,6,0,.85) 0%, rgba(26,27,30,.85) 100% );
  padding:30% 0 0; height:100%; width:100%; opacity:0; transition:all .4s;
}
.hover-bg .hover-text>h4{
  opacity:0; color:#fff; transform:translateY(100%); transition:all .25s;
  font-size:18px; letter-spacing:1px; font-weight:700; text-transform:uppercase;
}
.hover-bg:hover .hover-text>h4{ opacity:1; transform:translateY(0); }
.hover-bg:hover .hover-text{ opacity:1; }

/* =========================
   TESTIMONIALS
   ========================= */
#testimonials{ padding:100px 0; background:var(--concrete); }
#testimonials i{ color:#e6e6e6; font-size:32px; margin-bottom:20px; }
.testimonial{ position:relative; padding:20px; }
.testimonial-image{ float:left; margin-right:15px; }
.testimonial-image, .testimonial-image img{ display:block; width:64px; height:64px; border-radius:50%; }
.testimonial-content{ position:relative; overflow:hidden; }
.testimonial-content p{ margin-bottom:0; font-size:14px; font-style:italic; }
.testimonial-meta{ margin-top:10px; font-size:15px; font-weight:600; color:#666; }

/* =========================
   TEAM
   ========================= */
#team{ padding:100px 0; }
#team h4{ margin:5px 0; }
#team .team-img{ width:240px; }
#team .thumbnail{ background:transparent; border:0; }
#team .thumbnail .caption{ padding:10px 0 0; color:#888; }

/* =========================
   CONTACT
   ========================= */
#contact{
  padding:100px 0 60px;
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 35%, var(--concrete) 100%);
  color:var(--steel);
}
#contact .section-title{ margin-bottom:40px; }
#contact .section-title p{ font-size:16px; }
#contact h2{
  color:var(--ink);
  margin-top:10px; margin-bottom:15px; padding-bottom:15px;
}
#contact .section-title h2::after{ position:absolute; content:""; background:var(--brand); height:4px; width:60px; bottom:0; left:30px; }
#contact h3{ color:var(--ink); margin-top:80px; margin-bottom:25px; padding-bottom:20px; font-weight:600; }
#contact form{ padding-top:20px; }
#contact .text-danger{ color:#cc0033; text-align:left; }
#contact .btn-custom{
  margin:30px 0; background:var(--brand) !important; border:2px solid var(--brand);
}
#contact .btn-custom:hover{ color:#fff; background:var(--brand-dark) !important; }
label{ font-size:12px; font-weight:400; font-family:"Open Sans",sans-serif; float:left; }
#contact .form-control{
  display:block; width:100%; padding:6px 12px; font-size:16px; line-height:1.42857143;
  color:#444; background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:none; transition:border-color .15s ease;
}
#contact .form-control:focus{ border-color:var(--brand); outline:0; }
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder{ color:#999; }

#contact .contact-item{ margin:20px 0; }
#contact .contact-item span{ color:var(--ink); margin-bottom:10px; display:block; }
#contact .contact-item i.fa{ margin-right:10px; }
#contact .social{
  border-top:1px solid var(--line); padding-top:50px; margin-top:50px; text-align:center;
}
#contact .social ul li{ display:inline-block; margin:0 20px; }
#contact .social i.fa{
  font-size:22px; width:48px; height:48px; padding:12px 0;
  border:2px solid var(--brand); color:var(--brand); border-radius:50%; transition:all .25s;
}
#contact .social i.fa:hover{ color:#fff; background:var(--brand); }

/* =========================
   FOOTER
   ========================= */
#footer{ background:var(--concrete); padding:30px 0; }
#footer p{ color:#888; font-size:14px; }
#footer a{ color:var(--brand); }
#footer a:hover{ border-bottom:2px solid var(--brand); }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:768px){
  #about img{ margin:50px 0; width:100%; height:auto; }
  .intro h1{ font-size:46px; }
}

/* Acentos útiles */
.badge-safety{
  display:inline-block; padding:.25rem .5rem; border-radius:6px;
  background:var(--safety); color:#222; font-weight:800; font-size:.75rem;
}
/* Logo a la derecha del texto (más grande en desktop) */
.intro-logo{
  width: clamp(260px, 30vw, 420px); /* antes ~180–220px */
  height: auto;
  max-width: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

/* Desktop muy amplio: aún más grande si quieres */
@media (min-width: 1400px){
  .intro-logo{ width: 480px; }
}

/* Mobile: mantén razonable */
@media (max-width: 992px){
  .intro-logo{ width: 220px; }
}
@media (max-width: 576px){
  .intro-logo{ width: 170px; }
}