/* ============================================================
   JS SERVICIOS INTEGRALES — Puerto Montt
   ESTILO FINAL (según referencia elegida):
   Fondo casi negro + acento amarillo dorado + letras en mayúscula
   ============================================================ */
:root{
  --negro:#0d0d0d;
  --negro2:#141414;
  --negro3:#1c1c1c;
  --amarillo:#f5a623;      /* amarillo dorado */
  --amarillo2:#ffc24b;
  --blanco:#ffffff;
  --gris:#c9c9c9;
  --borde:#3a3a3a;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--negro);
  color:var(--blanco);
  line-height:1.6;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- NAVEGACIÓN ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:#0d0d0d;
  border-bottom:1px solid var(--borde);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
/* LOGO: recuadro "JS" + "SERVICIOS INTEGRALES" en dos líneas */
.logo{display:flex;align-items:center;gap:12px;}
.logo .js{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--amarillo);
  color:var(--amarillo);
  font-weight:900;font-size:22px;flex-shrink:0;
}
.logo .txt{line-height:1.15;text-transform:uppercase;}
.logo .txt b{color:var(--amarillo);font-size:16px;letter-spacing:1px;display:block;font-weight:800;}
.logo .txt span{color:var(--gris);font-size:11px;letter-spacing:2px;display:block;font-weight:600;}
.logo-img{width:52px;height:52px;object-fit:contain;}   /* ← tamaño de tu logo-imagen */

nav.menu ul{display:flex;gap:30px;list-style:none;}
nav.menu a{
  color:var(--blanco);font-weight:600;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;transition:.2s;padding:6px 0;
}
nav.menu a:hover{color:var(--amarillo);}
nav.menu a.activo{color:var(--amarillo);}

.btn{
  background:var(--amarillo);color:var(--negro);
  padding:11px 22px;border-radius:5px;font-weight:800;
  font-size:13px;letter-spacing:1px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;transition:.2s;border:none;cursor:pointer;
}
.btn:hover{background:var(--amarillo2);transform:translateY(-1px);}
.btn.outline{
  background:transparent;color:var(--blanco);
  border:1.5px solid var(--blanco);
}
.btn.outline:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--negro);}
.btn.sm{padding:8px 16px;font-size:12px;}

/* ---------- HERO ---------- */
.hero{
  background:
    linear-gradient(180deg,rgba(13,13,13,.55),rgba(13,13,13,.93)),
    url('../img/fondo-obra.jpg') center/cover no-repeat;
  background-color:var(--negro2);
  min-height:500px;display:flex;align-items:center;
}
.hero .inner{max-width:680px;padding:70px 0;}
.hero h1{
  font-size:46px;line-height:1.12;font-weight:900;
  text-transform:uppercase;margin-bottom:16px;
}
.hero .reg{color:var(--amarillo);font-size:18px;font-weight:800;text-transform:uppercase;margin-bottom:26px;letter-spacing:1px;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.hero .ubi{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--negro3);padding:8px 16px;border-radius:30px;
  border:1px solid var(--borde);font-size:14px;color:var(--blanco);
}
.hero .ubi .pin{color:var(--amarillo);}

/* ---------- CABECERA DE PÁGINA INTERNA ---------- */
.pagehead{
  background:
    linear-gradient(180deg,rgba(13,13,13,.6),rgba(13,13,13,.95)),
    url('../img/fondo-obra.jpg') center/cover no-repeat;
  background-color:var(--negro2);
  padding:80px 0;text-align:center;
}
.pagehead h1{
  font-size:40px;font-weight:900;text-transform:uppercase;letter-spacing:1px;
}
.pagehead h1 span{color:var(--amarillo);}
.pagehead .ubi{color:var(--gris);margin-top:10px;text-transform:uppercase;font-size:14px;}
.pagehead .ubi .pin{color:var(--amarillo);}

/* ---------- SECCIONES ---------- */
.seccion{padding:75px 0;}
.seccion.dark{background:var(--negro2);}

/* Título de sección: amarillo, centrado, con líneas decorativas a los lados */
.titulo{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-bottom:45px;
}
.titulo .line{height:1px;width:60px;background:var(--amarillo);}
.titulo h2{
  font-size:30px;font-weight:900;text-transform:uppercase;
  letter-spacing:1px;color:var(--amarillo);text-align:center;
}
.titulo h2 b{color:var(--amarillo);}

/* ---------- GRID / CARDS ---------- */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.card{
  background:var(--negro2);border:1px solid var(--amarillo);
  border-radius:8px;padding:24px 16px;text-align:center;transition:.25s;
}
.card:hover{transform:translateY(-4px);}
.card .icono{
  width:46px;height:46px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--amarillo);font-size:26px;
}
.card h3{
  font-size:13.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--blanco);line-height:1.35;font-weight:700;
}

/* ---------- PROYECTOS ---------- */
.proy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.proyecto{
  background:var(--negro2);border:1px solid var(--borde);
  border-radius:8px;overflow:hidden;transition:.25s;
}
.proyecto:hover{transform:translateY(-4px);border-color:var(--amarillo);}
.proyecto .foto{
  width:100%;height:210px;     /* ← edita la altura de la foto aquí */
  object-fit:cover;display:block;
}
.proyecto .info{padding:16px;text-align:center;}
.proyecto h4{font-size:15px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.proyecto .lbl{color:var(--amarillo);font-size:13px;font-weight:700;}

/* ---------- FRANJA DE CONTACTO (4 columnas) ---------- */
.contacto{background:var(--negro);border-top:1px solid var(--borde);}
.contacto .cols{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.contacto .col{
  padding:40px 20px;text-align:center;border-left:1px solid var(--borde);
}
.contacto .col:first-child{border-left:none;}
.contacto .col .ico{
  width:54px;height:54px;border-radius:50%;
  background:var(--amarillo);color:var(--negro);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin:0 auto 14px;font-weight:900;
}
.contacto .col h4{
  color:var(--amarillo);font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;
}
.contacto .col p{color:var(--blanco);font-size:14.5px;line-height:1.4;}

/* ---------- PIE ---------- */
footer{border-top:1px solid var(--borde);padding:24px 0;text-align:center;color:var(--gris);font-size:14px;}
footer b{color:var(--amarillo);}

/* ---------- FORMULARIO ---------- */
.form{max-width:560px;margin:0 auto;}
.form label{display:block;margin:14px 0 6px;color:var(--gris);font-size:14px;text-transform:uppercase;letter-spacing:.5px;}
.form input,.form select,.form textarea{
  width:100%;padding:12px 14px;border-radius:5px;
  border:1px solid var(--borde);background:var(--negro2);
  color:var(--blanco);font-family:inherit;font-size:15px;
}
.form textarea{min-height:110px;resize:vertical;}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--amarillo);}
.form .btn{margin-top:20px;width:100%;}

/* ---------- RESPONSIVO ---------- */
@media(max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){
  .proy-grid,.contacto .cols{grid-template-columns:repeat(2,1fr);}
  .contacto .col:nth-child(3){border-left:none;}
  .hero h1,.pagehead h1{font-size:34px;}
}
@media(max-width:640px){
  .grid,.proy-grid,.contacto .cols{grid-template-columns:1fr;}
  .contacto .col{border-left:none;}
  .hero h1{font-size:26px;}
  .pagehead h1{font-size:24px;}
  nav.menu ul{gap:14px;font-size:11px;}
  .nav{flex-wrap:wrap;height:auto;padding:12px 0;gap:8px;}
}