/*

	Theme Name: Ferrometal
	Theme URL: http://www.visualko.com/
	Description: Sitio web para fotografos.
	Author: Ernesto Schulz
	Author URI: http://www.visualko.com/
	Version: 1.0

*/

/*
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');


:root{
  --negro:#000;
  --blanco:#fff;
  --claro:#f5f5f5;
  --oscuro:#2f2f2f;
  --gris:#e5e4e2;
  --naranja:#f5ad00;

  --textoClaro:#eeedef;
  --textoGris:#6f6f6f;
  --textoOscuro:#222;
  --textoBlanco:#fff;

  --principal:#EAC319;
  --secundario:#333333;
  --tercero:#002F5C;
  --cuarto:#000000;
  --quinto:#F2F2F2;
}

/*
h2.titulo{
  color:var(--secundario);
  background:var(--quinto);
  text-shadow: 10px 10px 5px var(--cuarto);
}
*/

html, body {
  height: 100%;
}
body{
  background: var(--oscuro);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  word-wrap: break-word;
  color:var(--claro);
}
@media screen and (max-width: 480px) {
  body{

  }
}
/*
.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/
.centrada {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

h1, h2, h3, h4{

}

a{
  color:var(--claro);
}
a:hover{
  color:var(--blanco);
  text-decoration: none;
}


.clear{ clear:both;}

.hl{ clear:both; height:auto; overflow:hidden;}
.hlb{ clear:both; height:1px; overflow:hidden; background:#ebe9eb; margin-top:10px; margin-bottom:10px;}
.hl10{ clear:both;	height:10px;}
.hl25{ clear:both;	height:25px;}
.hl30{ clear:both;	height:30px;}
.hl50{ clear:both;	height:50px;}
.hl100{ clear:both;	height:100px;}
.hl150{	clear:both;	height:150px;}

.bb{ padding-bottom:10px; border-bottom:solid 1px #ccc; margin-bottom:10px;}
.bt{ padding-top:10px; border-top:solid 1px #ccc; margin-top:10px;}
.br{ padding-right:10px; border-right:solid 1px #ccc; margin-right:10px;}
.bl{ padding-left:10px; border-left:solid 1px #ccc; margin-left:10px;}

.p0{ padding:0;}
.pl0{ padding-left:0}
.pr0{ padding-right:0}
.m0{ margin:0;	}
.m10{margin:10px 0;}
.p50{ padding:50px 0;	}
.p100{ padding:100px 0;	}
.pbox { padding: 50px;}



.img-full{ width:100%;	height:auto;}
.img-circle{
  border-radius: 50%;
}
.center{ margin:auto 0;}

.btn-principal{
  background-color: var(--principal);
  color: var(--claro);
}
.btn-principal:hover{
  background-color: var(--negro);
  color: var(--claro);
}

.btn-secundario{
  background-color: var(--secundario);
  color: var(--claro);
}
.btn-secundario:hover{
  background-color: var(--principal);
  color: var(--claro);
}

.btn-oscuro{
  background-color: var(--principal);
  color: var(--claro);
}
.btn-oscuro:hover{
  background-color: var(--oscuro);
  color: var(--claro);
}

.google-maps {
    position: relative;
    padding-bottom: 540px; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 540px !important;
}
.formulario{
  padding:50px 20px;
}


.italica{font-style: italic;}
.centrado{text-align:center}
.alignRight{text-align:right}
.mayuscula{text-transform:uppercase;}
/*
.naranja{color:rgba(209,132,86,1)}
.bg-naranja{background-color:rgba(209,132,86,1)}
.blanco{color:rgba(255,255,255,1)}
.bg-blanco{background-color:rgba(255,255,255,1)}
.azul{color:rgba(120,148,204,1)}
.bg-azul{background:rgba(120,148,204,1)}
.gris{color:rgba(223,223,220.1)}
.bg-gris{background-color:rgba(223,223,220,1)}
.negro{color:rgba(44,44,44,1)}
.bg-negro{background-color:rgba(44,44,44,1)}
*/

.weight200{font-weight: 200}
.weight300{font-weight: 300}
.weight400{font-weight: 400}
.weight700{font-weight: 700}
.weight800{font-weight: 800}
.weight900{font-weight: 900}

.oscuro{
  background-color:var(--oscuro);
}
.textoOscuro{
  color:var(--oscuro);
}

.claro{
  background-color:var(--claro);
}
.textoClaro{
  color:var(--claro);
}

.bgBlanco{
  background-color:var(--blanco);
}
.textoPrincipal{
  color:var(--principal);
}

.textoSecundario{
  color:var(--secundario);
}

ul.tabs-vmv li a{
  background: var(--tercero) !important;
  color:var(--blanco) !important;
}
ul.tabs-vmv li a.active{
  background: var(--principal) !important;
  color:var(--blanco) !important;
}

/********   navegacion **********/
.navbar{
  background: transparent;
}
.navbar-negro{
  background:rgba(0,0,0, 0.7);
}
.navbar-toggler{
  background-color: var(--principal);
  border:1px solid var(--oscuro);
}
.navbar-toggler-icon{
  color:#000;
}
ul.menu-principal{
  width:auto;
  height:auto;
  float:right;
  margin:0;
  margin-top:25px;
  transition:all 0.25s ease;
  padding: 0; /* Agregado para evitar espacios innecesarios */
}

ul.menu-principal li{
  float:left;
  list-style:none;
  margin:0 10px;
  position: relative; /* Añadido para los submenús */

}

ul.menu-principal li a{
  color:var(--principal);
  font-size: 1.1rem;
  text-decoration: none;
	display: block;
	text-transform: uppercase;
	position: relative;
}
/*  ul.menu-principal li a:after{position: absolute;  bottom: 45px;  left: 0;  right: 0;  margin: auto;  width: 0%;  content: '.';  color: transparent;  background: #cc5a1c;  height: 5px;}  */
ul.menu-principal li:hover{}
ul.menu-principal li a:hover{color:var(--blanco); border-bottom: dashed 1px var(--blanco);}
ul.menu-principal li a:hover:after{}
ul.menu-principal li.active a {color:var(--principal); text-shadow:none;	background:var(--blanco) !important; padding:5px; border-radius: 2px; margin:-5px;}
/*  ul.menu-principal li.active a:after{position: absolute;  bottom: 45px;  left: 0;  right: 0;  margin: auto;  width: 100%;  content: '.';  color: transparent;  background: #cc5a1c;  height: 5px;} */
ul.menu-principal li ul.dropdown-menu li.current-menu-item a{color:var(--secundario) !important;	text-shadow:none;	background:none !important; border-bottom: dashed 1px var(--gris-claro)}

ul.menu-principal li > ul.dropdown-menu{background:var(--principal); left:0; right:auto; top:30px ; width:auto; margin:0; padding:0; box-shadow: none;}
ul.menu-principal li > ul.dropdown-menu li{clear:both; margin:10px 0; color:var(--claro)}
ul.menu-principal li > ul.dropdown-menu li a{color:var(--claro); margin-left:10px;}
ul.menu-principal li > ul.dropdown-menu li:hover{color:var(--blanco); background:none;  border-bottom: dashed 1px var(--blanco)}
ul.menu-principal li > ul.dropdown-menu li a:after{position: absolute;  bottom: 45px;  left: 0;  right: 0;  margin: auto;  width: 0%;  content: '.';  color: transparent;  background: #cc5a1c;  height: 5px;}
ul.menu-principal li > ul.dropdown-menu li a:hover{color:var(--blanco); background:none; border-bottom:none !important}
ul.menu-principal li > ul.dropdown-menu li a.active{color:var(--blanco);}
ul.menu-principal li > ul.dropdown-menu li a:hover:after{width: 0%;}


.menu-search{
  margin-top:-7px;
}
/* multilevel navigation */
ul.dropdown-menu li > ul.dropdown-menu {
    left: 100%;
    top: 0;
}

ul.dropdown-menu li:hover > ul.dropdown-menu,
ul.dropdown-menu li:focus > ul.dropdown-menu {
    display: block;
}



@media screen and (max-width : 960px) {
  ul.menu-principal{width:100%; height:100%; clear:both; background:transparent !important; margin:20px 0;}
  ul.menu-principal li{float:left; padding:5px;}
  ul.menu-principal li a{color:var(--blanco)}
  ul.menu-principal li a:hover{color:var(--gris-claro); background:none; border-bottom:none !important}
  ul.menu-principal li a.active{color:var(--gris-claro);}
  ul.menu-principal li a:hover:after{display:none}
  ul.menu-principal li.active a:after{display:none}
  ul.menu-principal li ul.dropdown-menu li.current-menu-item a{color:var(--gris-claro) !important;	text-shadow:none;	background:none !important;}
	ul.menu-principal li > ul.dropdown-menu{background: var(--theme-color); left:0; right:auto; top:30px ; width:auto; margin:0; padding:0;}
}

@media screen and (max-width : 480px) {
  ul.menu-principal{background:var(--theme-color) !important}
  ul.menu-principal li{clear:both; padding:5px;}
  .navbar{padding:5px;}
}


header .logo {
	float: left;
	margin-top: 23px;
	display: block;
	height: 100px !important;
	width: auto;
	line-height: auto;
}
header .logo a {
	margin: 0;
	padding: 0;
}
.texto-logo{
  color:var(--principal);
  font-weight: 800;
  font-size: 2rem;
  text-shadow: 2px 2px 2px var(--negro);
}
@media screen and (max-width: 480px) {
  .logo{
      left:0;
  }
}

/******* fin menu *****/
/*******************************/

#inicio{
  height:80vh;
}
#slider{
  height:100%;
}
.slide-1{
  height:100%;
  background-image: url('img/inicio-1.jpg');
  background-repeat: no-repeat;
  background-position:center center;
  background-size:cover;
}
.slide-2{
  height:100%;
  background-image: url('img/inicio-2.jpg');
  background-repeat: no-repeat;
  background-position:center center;
  background-size:cover;
}
.slide-3{
  height:100%;
  background-image: url('img/inicio-3.jpg');
  background-repeat: no-repeat;
  background-position:center center;
  background-size:cover;
}

.owl-item, .owl-stage-outer, .owl-stage{
  height:100%;
}
.slider-text{
  padding:200px 0;
}
.slider-text h2{
  font-size:4rem;
  color:var(--principal);
  font-weight: 800;
  text-shadow: 2px 2px 2px var(--negro);
}
.slider-text p{
  font-size: 1.5rem;
  color:var(--blanco);
  text-shadow: 2px 2px 2px var(--negro);
}

@media screen and (max-width: 992px) {
  {

  }
}

@media screen and (max-width : 576px) {
  .slider-text h2{
    font-size:2.5rem;
    word-break: keep-all;
  }
}


#nosotros{
  padding-top:100px;
  padding-bottom:100px;
}
.titulo-seccion h2{
  /* font-family: "Oswald", sans-serif; */
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
  color:var(--principal);
}
.titulo-seccion p{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  color:#fff;
  font-size: 2rem;
}


.hero {
    width: 100%;
    height: 80vh;
    position: relative;
    text-align: left;
    overflow: hidden;
}

@media screen and (max-width: 480px) {
    .hero {
        height: 100vh;
    }
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo negro con 50% de opacidad */
    z-index: 0; /* Debajo de los textos, pero sobre el video */
}

.textos-hero {
    position: relative;
    z-index: 1; /* Sobre el overlay */
    height: 100%;
    /* display: flex;*/
    align-items: center;
    justify-content: left;
    text-align: left;
}

.hero-text h2 {
    font-size: 3rem;
    color: var(--principal);
    font-weight: 800;

}

.hero-text p {
    font-size: 1.2rem;
    color: var(--quinto);

}

.hero-text span {
    font-size: 1rem;
    color: var(--blanco);
    font-style: italic;
}

@media screen and (max-width : 576px) {
  .hero-text h2{
    font-size:2rem;
  }
}

@media screen and (max-width: 992px) {
    .hero-text h2 {
        font-size: 2.5rem;
    }

    .hero-text p {
        font-size: 1rem;
    }
}







#servicios{
  background: url(img/bg1.png) no-repeat left bottom;
  background-size: cover;
  padding-top:100px;
  padding-bottom:100px;
}

.listado-servicios{
  padding-top:50px;
  padding-bottom:50px;
}
.accordion-button{
    background: var(--principal);
    color:#fff;
}

.accordion-button::after{
  color:#fff;
}

.bg-principal h2{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
}
.hl-servicio{
  margin-bottom:30px;
  color:var(--claro);
  padding:20px;
}
.hl-servicio:hover{
  background-image: none;
}
.img-servicio img{
  border:solid 5px var(--principal);
}
.hl-servicio h2{
  font-size: 1.25rem;
  color:var(--principal);
  margin-bottom: 50px;
}
.hl-servicio div p ul li strong{
  color:var(--principal);
}

.post-servicio{
  padding-top: 100px;
  padding-bottom: 100px;
  background: url(img/bg1.png) no-repeat left bottom;
  background-size: cover;
}


.video-responsive {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px;
	position: relative;
	}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}


#banner-contacto{
  background:var(--secundario);
  color:var(--blanco);
  padding-top:100px;
  padding-bottom:100px;
}
#banner-contacto h2{
  color:var(--blanco);
  font-size: 3rem;
  font-weight: 800;
}

@media screen and (max-width : 576px) {
  #banner-contacto h2{
    font-size: 2rem
  }
}



#trabajos-portada{
  padding-top:100px;
  padding-bottom:100px;
  background: var(--principal);
}

#clientes{

}
.item-cliente{
  background:var(--negro);
  color:var(--principal);
  padding:30px;
}
#contenedor-contacto{
  margin-top:50px;
background:  url(img/guardia-bg.jpg) no-repeat left top;
background-size: cover;
}
#contacto{
  padding-top:100px;
  padding-bottom:100px;
}

#contacto div h2{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
}

@media screen and (max-width : 768px) {
  #contacto div h2{
    color:#fff;
  }
}



.formulario{
  background:#fff;
  border-radius: 15px;
  padding:20px;
  margin-bottom:50px;
}
#footer{
  background: var(--negro);
  color:var(--principal);
  padding:0;
}

.titulo-footer{

}

.instagram-footer a{
  color:var(--principal);
  text-decoration: none;
}