/* Reset */
*{
  margin: 0;padding: 0;box-sizing: border-box;
}
/* Estilos principales */
html, body{overflow-x: hidden; font-family: 'Dancing Script', cursive;
  line-height: 1.7em;}
a{ color: #f3e8d6;text-decoration:none;}
h1, h2, h3{padding-bottom: 10px;}
p{margin: 10px 0;}
.container{margin: auto;max-width: 1100px;overflow: auto;padding: 0 20px;
}

/* Navegación */
/* Logo */
.logo {float: left; height: 80px; display: flex; align-items: center; margin-left: -30px;}
.logo a {display: flex; align-items: center;gap: 10px;}
.logo img {max-height: 110px; width: auto; display: block;}  /* SOLO la imagen cambia */
.logo span {font-size: 28px; font-weight: bold; color: #48300a8a; text-shadow: 0 2px 6px rgba(47, 44, 44, 0.671);}

#navbar{background: lab(43.16% 10.73 39.98 / 0.653);color: #f3e8d6; overflow: hidden; height: 80px;}
#navbar a{color: #48300a8a;text-shadow: 0 2px 6px rgba(47, 44, 44, 0.671);}
#navbar h1{ float: left;padding-top: 20px;}
#navbar ul{list-style: none;float: right;}
#navbar ul li{float: left;}
#navbar ul li a {line-height: 80px; padding: 0 20px; display: block;}
#navbar ul li a:hover,#navbar ul li a.current{background: lch(43.16% 41.39 74.97 / 0.653);color: #f3e8d6;}

/* Showcase */
#showcase{        /* center/cover; ajusta la imagen para que vea mas presentable */
  background: url('../img/fondo.jpeg') no-repeat center center / cover; height: 600px; position: relative; overflow: hidden; width: 100%;}
#showcase::before {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 1;}
.showcase-images img { position: absolute; z-index: 1;filter: brightness(60%);transition: filter 0.3s ease;}
.showcase-images img:hover {filter: brightness(90%);}

/* Izquierda */
.img-left-1 { left: 40px; top: 50%; width: 370px; transform: translateY(-110%);}
.img-left-2 { left: 70px; top: 95%; width: 310px; transform: translateY(-95%);}

/* Centro */
.img-center { left: 50%; top: 45%; width: 415px; transform: translate(-50%, -40%);}

/* Derecha */
.img-right-1 { right: 60px; top: 80%; width: 350px; transform: translateY(-50%);}
.img-right-2 { right: 50px; top: 10%; width: 330px; transform: translateY(-10%);}

.showcase-content { position: relative; z-index: 2; text-align: center;
  padding-top: 170px; color: lch(43.16% 41.39 74.97 / 0.653);}

#showcase .showcase-content{ color:#f3e8d6;text-align: center;padding-top: 170px;}
#showcase .showcase-content h1{font-size: 100px; line-height: 1.2em;}
#showcase .showcase-content p{padding-bottom: 100px; line-height: 1.7em;}

/* Home */
#home-info{height: 400px;
}
#home-info .info-img{float: left;width: 50%; background: url('../img/descarga\ \(6\).jpeg') no-repeat;background-position: center;
  background-size: cover;min-height: 100%; filter: brightness(80%);
}

#home-info .info-content{float: right;width: 50%; height: 100%;text-align: center;padding: 50px 30px;
  overflow: hidden;  background: linear-gradient(135deg, #a9987e, #6e5539);
}

#home-info .info-content h2{ color: #fff1dc; font-size: 36px; margin-bottom: 20px;}
#home-info .info-content p{ color: #f3e8d6; text-shadow: 0 2px 6px rgba(3, 3, 3, 0.671); font-size: 18px;
  line-height: 1.9; text-align: justify; max-width: 420px; margin: 0 auto 25px auto ;}


/* Features*/

#features {
  display: flex; align-items: stretch;}
.box { width: 25%; padding: 30px 40px; text-align: center;}
.box i { margin-bottom: 25px; color: #48300a;}
.box h3 { font-size: 24px; margin-bottom: 10px;}
.box hr {width: 100px; margin: 15px auto 25px auto; border: none; height: 2px; background: #8e724e;}

.services-list {
  list-style-position: inside; text-align: justify; padding: 0; margin: 0 auto; max-width: 220px;}
.services-list li { margin-bottom: 10px; font-size: 16px;}

.bg-gray,
.bg-primary{ background: #a9987e; color: #333;}
.bg-light {background: #f4f4f4; color: #333;}

#main-footer {text-align: center; background: #8e724e; color: #fffdff; padding: 10px;}

/* Empresa */

.hero-bg {
  background: url('../img/fondo.jpeg') no-repeat center center / cover; min-height: 100vh; position: relative;overflow: hidden; width: 100%;}
.hero-bg::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1;}
.hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  padding: 20px 80px; align-items: center; color: #f3e8d6;
}

/* Texto derecho*/

.hero-text { max-width: 520px; text-align: center;}
.hero-text h1 { font-size: 42px; margin-bottom: 25px; color: #8e724e; text-shadow: 0 2px 6px rgba(7, 7, 7, 0.7);}
.hero-text p {font-size: 18px; line-height: 1.2; margin-bottom: 18px; text-align: justify;}

/* Texto Valores-personalizado*/

.values-text h1 {font-size: 36px; text-align: center;}
.values-text p { font-size: 20px; line-height: 1.2; text-align:justify;}
.values-text li {font-size: 19px; text-align: justify; line-height: 1.8 }

/*Collage izquierdo*/

.hero-collage {position: relative; width: 10%; height: 600px;}
.hero-collage img {position: absolute; width: 200px; height: 200px; object-fit: cover; border-radius: 16px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.35); filter: brightness(85%); transition: transform 0.3s ease, filter 0.3s ease;}
.hero-collage img:hover { transform: scale(1.08); filter: brightness(100%); z-index: 10;}
.hero-collage img:nth-child(1) { top: 0;   left: 0;   z-index: 6; }
.hero-collage img:nth-child(2) { top: 40px; left: 160px; z-index: 5; }
.hero-collage img:nth-child(3) { top: 220px; left: 40px; z-index: 4; }
.hero-collage img:nth-child(4) { top: 260px; left: 220px; z-index: 3; }
.hero-collage img:nth-child(5) { top: 120px; left: 320px; z-index: 2; }
.hero-collage img:nth-child(6) { top: 410px; left: 100px; z-index: 6; }

/*Contacto */

.contacto-bg { min-height: 100vh;}
.contacto-content {position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; padding: 140px 100px; color: #f3e8d6;}

/*Formulario*/

.contacto-form {
  background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); padding: 40px; border-radius: 20px;box-shadow: 0 20px 40px rgba(0,0,0,0.35);}
.contacto-form h1 { font-size: 42px; margin-bottom: 10px; color: #8e724e; text-shadow: 0 2px 6px rgba(0,0,0,0.4);}
.contacto-form p { margin-bottom: 25px; font-size: 18px;}
.contacto-form label { display: block; margin-bottom: 5px; font-size: 16px;}
.contacto-form input,
.contacto-form textarea { width: 100%; padding: 12px 15px; margin-bottom: 20px; border-radius: 10px;
  border: none; outline: none; font-family: inherit;}
.contacto-form textarea { min-height: 120px; resize: none;}
.contacto-form button { background: #8e724e;color: #fff; border: none; padding: 14px 30px;
  border-radius: 30px; font-size: 18px; cursor: pointer; transition: background 0.3s ease;}
.contacto-form button:hover { background: #6f5638;}

/*Info Contacto*/

.contacto-info { display: flex; flex-direction: column; justify-content: center; gap: 40px;}
.info-item {background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); padding: 30px;
  border-radius: 18px; box-shadow: 0 15px 30px rgba(0,0,0,0.3); text-align: center;}
.info-item .icon { font-size: 40px; display: block; margin-bottom: 10px;}
.info-item h3 { font-size: 24px; margin-bottom: 8px; color: #8e724e;}
.info-item p { font-size: 17px; line-height: 1.6;}