/* ═══════════════════════════════════════════════════════════
   Javela Hermanos — páginas interiores (/servicios, /proyectos, /unetenos)
   Se carga después de styles.css: reutiliza sus variables, botones,
   nav, campos y footer, y sólo añade lo propio de estas páginas.
   ═══════════════════════════════════════════════════════════ */

/* En la portada la nav espera a que termine el hero; aquí no hay hero
   que esperar, así que va visible desde el principio (clase is-visible
   en el marcado) y el contenido arranca por debajo de ella. */
.page{ padding-top:var(--nav-h); }

/* ═══════════════ CABECERA DE PÁGINA ═══════════════ */
.page-hero{
  --page-hero-top:clamp(70px,10vw,150px);
  position:relative; overflow:hidden;
  padding:var(--page-hero-top) 0 clamp(56px,7vw,100px);
  background:var(--ink);
}
/* el mismo halo de madera del contacto y de la franja de postulación */
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 82% 0%, rgba(200,146,79,.16), transparent 70%);
}
.page-hero .wrap{ position:relative; }
.page-hero__title{
  font-size:clamp(2.4rem, 6vw + .4rem, 5.6rem);
  letter-spacing:-.04em; line-height:.98; color:var(--cream);
  max-width:14ch;
}
.page-hero__title em{
  font-family:var(--serif); font-style:italic; font-weight:300;
  letter-spacing:-.01em; color:var(--wood-lt);
}
.page-hero .lead{ color:var(--cream); }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,40px); }
/* /unetenos: una persona del equipo, recortada, apoyada en el borde
   inferior a la derecha. Va después de .wrap en el marcado para que en
   móvil caiga debajo del texto; en escritorio .wrap sube con z-index
   para quedar encima si se tocan.
   Fondo blanco: la chaqueta negra resalta sola, sin el halo de madera que
   necesitaba sobre --ink. La sección sube por debajo de la nav (que es
   crema translúcida) para que detrás de ella también se vea blanco; si
   no, ahí asoma el --ink del body por el padding-top de .page. */
.page-hero--persona{
  margin-top:calc(-1 * var(--nav-h));
  padding-top:calc(var(--page-hero-top) + var(--nav-h));
  background:var(--white);
}
.page-hero--persona::before{ display:none; }
.page-hero--persona .page-hero__title,
.page-hero--persona .lead{ color:var(--brown); }
.page-hero--persona .page-hero__title em{ color:var(--wood); }
.page-hero--persona .wrap{ z-index:1; }
.page-hero--persona .lead{ max-width:min(46ch, 52%); }
/* el 92 % de lo que queda por debajo de la nav: la franja de detrás de
   ella es de la sección, pero no debe agrandar la foto */
.page-hero__persona{
  position:absolute; right:clamp(0px,4vw,80px); bottom:0;
  height:calc((100% - var(--nav-h)) * .92); width:auto; max-width:48%;
  object-fit:contain; object-position:bottom right;
  pointer-events:none; user-select:none;
}

/* ═══════════════ SERVICIOS — un bloque por servicio ═══════════════
   Foto y texto alternan de lado para que la página no se lea como una
   columna de fichas iguales. */
.svc{ background:var(--cream); color:var(--brown); padding:clamp(40px,6vw,90px) 0; }
.svc__item{
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:clamp(28px,5vw,80px);
  padding:clamp(36px,5vw,70px) 0;
  border-bottom:1px solid rgba(51,40,30,.16);
}
.svc__item:last-child{ border-bottom:0; }
.svc__item:nth-child(even) .svc__media{ order:2; }

.svc__media{
  aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 60px -36px rgba(13,16,21,.6);
}
.svc__media img{ width:100%; height:100%; object-fit:cover; }

.svc__num{
  font-size:.72rem; font-weight:700; letter-spacing:.24em; color:var(--wood-dk);
  margin-bottom:1em;
}
.svc__body h2{
  font-size:clamp(1.8rem, 2.6vw + .6rem, 3rem); letter-spacing:-.032em;
  margin-bottom:.55em;
}
.svc__body > p{ opacity:.78; max-width:48ch; }

.svc__list{
  list-style:none; margin:1.4em 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.55em 1.6em;
}
.svc__list li{
  position:relative; padding-left:1.25em; font-size:.93rem; line-height:1.5; opacity:.85;
}
.svc__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5em; height:1.5px; background:var(--wood-dk);
}

/* ═══════════════ PROYECTOS — filtros, rejilla y visor ═══════════════ */
.works{ background:var(--cream); color:var(--brown); padding:clamp(40px,6vw,90px) 0 clamp(60px,8vw,110px); }

.works__filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3vw,40px); }
.works__filter{
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  padding:.62em 1.2em; border-radius:999px;
  border:1px solid rgba(51,40,30,.22); background:transparent; color:var(--brown);
  transition:background-color .25s, border-color .25s, color .25s;
}
.works__filter:hover{ border-color:var(--wood-dk); }
.works__filter.is-active{ background:var(--brown); border-color:var(--brown); color:var(--cream); }

/* filas densas de alto fijo: las fotos vienen en proporciones mezcladas y
   object-fit las recorta, así la rejilla no deja huecos al filtrar */
.works__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%,17rem), 1fr));
  grid-auto-rows:clamp(220px,24vw,320px); grid-auto-flow:dense;
}
.works__item:nth-child(5n+1){ grid-row:span 2; }
.works__item[hidden]{ display:none; }

.works__card{
  position:relative; display:block; width:100%; height:100%;
  padding:0; border:0; border-radius:var(--r); overflow:hidden; cursor:zoom-in;
  background:var(--cream-2);
  box-shadow:0 30px 60px -40px rgba(13,16,21,.6);
}
.works__card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.works__card:hover img{ transform:scale(1.04); }
.works__card:focus-visible{ outline:2px solid var(--wood); outline-offset:3px; }

.works__meta{
  position:absolute; inset:auto 0 0; padding:2.4em 1.1em 1em; text-align:left;
  display:flex; flex-direction:column; gap:.2em; color:var(--cream);
  background:linear-gradient(transparent, rgba(13,16,21,.78));
}
.works__meta b{ font-size:1rem; }
.works__meta span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--wood-lt); }

.lightbox{
  width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0;
  border:0; background:rgba(13,16,21,.94); color:var(--cream);
}
.lightbox[open]{ display:grid; place-items:center; }
.lightbox::backdrop{ background:transparent; }
.lightbox__fig{ margin:0; padding:clamp(60px,6vw,80px) clamp(16px,8vw,120px); text-align:center; }
.lightbox__fig img{
  max-width:100%; max-height:calc(100svh - 170px); margin:0 auto;
  border-radius:var(--r); object-fit:contain;
}
.lightbox__fig figcaption{ margin-top:1em; font-size:.92rem; opacity:.75; }
.lightbox__btn{
  position:absolute; width:48px; height:48px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid rgba(247,241,231,.3); background:rgba(247,241,231,.06); color:var(--cream);
  transition:background-color .25s, border-color .25s;
}
.lightbox__btn:hover{ background:rgba(247,241,231,.14); border-color:var(--cream); }
.lightbox__btn svg{ width:22px; height:22px; }
.lightbox__btn--close{ top:16px; right:16px; }
.lightbox__btn--prev{ left:16px; top:50%; translate:0 -50%; }
.lightbox__btn--next{ right:16px; top:50%; translate:0 -50%; }

/* ═══════════════ CIERRE — llamada a cotizar ═══════════════ */
.page-cta{
  position:relative; background:var(--ink-2); color:var(--cream);
  padding:clamp(60px,8vw,120px) 0; text-align:center;
  border-top:1px solid rgba(200,146,79,.28);
}
.page-cta .h2{ margin:0 auto; max-width:18ch; }
.page-cta .lead{ margin-inline:auto; }
.page-cta .page-hero__actions{ justify-content:center; }

/* ═══════════════ ÚNETE — oficios y formulario ═══════════════ */
.roles{ background:var(--cream); color:var(--brown); padding:clamp(60px,8vw,110px) 0; }
.roles__grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,15rem), 1fr));
}
.roles__grid li{
  padding:clamp(20px,2vw,28px); border-radius:var(--r);
  border:1px solid rgba(51,40,30,.14); background:var(--cream-2);
}
.roles__grid b{ display:block; font-size:1.05rem; margin-bottom:.35em; }
.roles__grid span{ font-size:.9rem; opacity:.7; line-height:1.55; }

.apply{ background:var(--ink-2); color:var(--cream); padding:clamp(60px,8vw,110px) 0; }
.apply__form{ max-width:860px; }

/* auto-fit y no dos columnas fijas: así no hace falta media query y en
   tableta pasa a una sola columna cuando los campos ya no caben */
.join__fields{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,16rem), 1fr));
}
.join__field--wide{ margin-top:1.4em; }

.join__group{ margin:1.4em 0 0; padding:0; border:0; }
.join__group legend{
  padding:0 0 .8em; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6;
}

.join__cv{ margin-top:1.4em; }
.join__file{
  position:relative;
  display:flex; align-items:center; gap:.85em; flex-wrap:wrap;
  padding:1.05em 1.25em; border-radius:14px; cursor:pointer;
  border:1.5px dashed rgba(247,241,231,.28);
  background:rgba(247,241,231,.04);
  transition:border-color .25s, background-color .25s;
}
.join__file:hover{ border-color:rgba(227,177,114,.7); background:rgba(247,241,231,.08); }
.join__file svg{ width:20px; height:20px; flex:0 0 auto; color:var(--wood-lt); }
.join__file b{ font-weight:700; font-size:.97rem; }
.join__file em{ font-style:normal; font-size:.82rem; opacity:.55; }
/* el input nativo no se puede estilar; se esconde sin sacarlo del foco */
.join__file input[type=file]{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.join__file:has(input:focus-visible){ border-color:var(--wood); }
.join__filename{
  margin:.8em 0 0; font-size:.88rem; font-weight:600; color:var(--wood-lt);
}
.join__file--set{ border-style:solid; border-color:var(--wood); background:rgba(200,146,79,.12); }

#joinSend{ margin-top:1.7em; }
.join__fineprint{ font-size:.78rem; opacity:.55; text-align:center; margin:1em auto 0; max-width:52ch; line-height:1.6; }
.join__alt{
  border:0; background:none; padding:0; font:inherit; color:var(--wood-lt);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.join__error{ margin:1em 0 0; color:#FFAF8A; font-size:.88rem; font-weight:600; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:900px){
  .svc__item{ grid-template-columns:1fr; }
  .svc__item:nth-child(even) .svc__media{ order:0; }
  /* sin sitio al lado del texto: la foto pasa debajo, pegada al borde */
  .page-hero--persona{ padding-bottom:0; }
  .page-hero--persona .lead{ max-width:none; }
  .page-hero__persona{
    position:relative; right:auto; display:block;
    width:min(78%, 420px); height:auto; max-width:none;
    margin:clamp(32px,6vw,56px) auto 0;
  }
}
@media (max-width:560px){
  .svc__list{ grid-template-columns:1fr; }
  .works__item:nth-child(5n+1){ grid-row:auto; }
  .lightbox__btn--prev, .lightbox__btn--next{ top:auto; bottom:16px; translate:none; }
  .page-hero__actions .btn{ flex:1 1 100%; }
}