/* ============================================================
   KEO REFURB — CONTACTO (página)
   ============================================================ */

/* ===== HERO DE PÁGINA ===== */
.contact-hero{ padding:clamp(130px,16vw,210px) 0 clamp(50px,6vw,90px); text-align:center; }
.contact-hero .wrap{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.contact-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(38px,5vw,72px); line-height:1.04; max-width:18ch; text-wrap:balance; letter-spacing:-.01em; }
.contact-hero__lead{ max-width:58ch; color:var(--piedra-texto); font-size:clamp(16px,1.35vw,20px); line-height:1.55; font-family:var(--serif); font-style:italic; }

/* ===== MAIN: FORM + INFO ===== */
.contact-main{ padding:0 0 var(--sec-y); }
.contact-main__grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(40px,5vw,90px); align-items:flex-start; }

/* el .form ya tiene estilo del sistema; subimos densidad */
.contact-main .form{ padding:clamp(34px,4vw,56px); }

/* file field */
.field--file{ display:flex; flex-direction:column; gap:.7em; margin-top:clamp(18px,2vw,28px); }
.field--file > label{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--piedra-texto); }
.file-field{ display:flex; align-items:center; gap:1rem; padding:.55em 0; border-bottom:1px solid var(--piedra-media); transition:border-color .4s var(--ease); }
.file-field:has(input:focus){ border-color:var(--acento); }
.file-field input[type=file]{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.file-field .file-btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--piedra-media); padding:.7em 1.2em; color:var(--carbon); cursor:pointer;
  transition:.35s var(--ease);
}
.file-field .file-btn:hover{ border-color:var(--acento); color:var(--acento); }
.file-field .file-btn svg{ width:13px; height:13px; }
.file-field .file-name{ font-size:13.5px; color:var(--piedra-texto); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-field .file-name.on{ color:var(--carbon); }
.field--file .hint{ font-size:11.5px; color:var(--piedra-media); letter-spacing:.02em; }

/* ===== COLUMNA DERECHA: INFO ===== */
.cinfo{ display:flex; flex-direction:column; gap:clamp(28px,3vw,42px); padding-top:clamp(14px,1.6vw,24px); }
.cinfo__block{ display:flex; flex-direction:column; gap:.6rem; }
.cinfo__block h2{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dorado); font-weight:600; }
.cinfo__block .ci-val{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,1.8vw,28px); line-height:1.25; color:var(--carbon); letter-spacing:-.005em; }
.cinfo__block .ci-val a{ color:inherit; border-bottom:1px solid transparent; transition:border-color .35s var(--ease); }
.cinfo__block .ci-val a:hover{ border-color:var(--acento); }
.cinfo__block .ci-sub{ color:var(--piedra-texto); font-size:14.5px; line-height:1.6; }
.cinfo__sep{ height:1px; background:var(--piedra); border:0; margin:0; }

.cinfo__social{ display:flex; gap:.8rem; margin-top:.2rem; }
.cinfo__social a{
  width:42px; height:42px; border:1px solid var(--piedra-media); border-radius:50%;
  display:grid; place-items:center; color:var(--carbon); transition:.4s var(--ease);
}
.cinfo__social a:hover{ border-color:var(--acento); color:var(--acento); }
.cinfo__social svg{ width:16px; height:16px; }

/* ===== MAPA ===== */
.contact-map{ position:relative; }
.contact-map__head{ padding:clamp(40px,5vw,80px) var(--pad-x) clamp(24px,3vw,40px); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; max-width:var(--maxw); margin-inline:auto; }
.contact-map__head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,46px); line-height:1.1; max-width:18ch; }
.contact-map__head .addr{ color:var(--piedra-texto); font-size:14.5px; max-width:30ch; text-align:right; }
.contact-map__frame{ position:relative; width:100%; aspect-ratio:21/9; background:var(--piedra-claro); overflow:hidden; }
.contact-map__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.55) contrast(.95); transition:filter .8s var(--ease); }
.contact-map__frame:hover iframe{ filter:grayscale(0) contrast(1); }
.contact-map__pin{
  position:absolute; left:clamp(20px,2.4vw,40px); bottom:clamp(20px,2.4vw,40px); z-index:2;
  background:var(--blanco); border-top:2px solid var(--acento);
  padding:clamp(18px,2vw,28px) clamp(22px,2.4vw,34px); max-width:320px;
  box-shadow:0 14px 40px rgba(26,26,26,.16);
}
.contact-map__pin .eyebrow{ color:var(--dorado); }
.contact-map__pin b{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(18px,1.6vw,22px); margin-top:.4em; color:var(--carbon); }
.contact-map__pin span{ display:block; color:var(--piedra-texto); font-size:13.5px; line-height:1.55; margin-top:.4em; }
.contact-map__pin a{ display:inline-flex; align-items:center; gap:.5em; margin-top:.9em; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--carbon); border-bottom:1px solid var(--acento); padding-bottom:4px; transition:gap .4s var(--ease); }
.contact-map__pin a:hover{ gap:1em; }

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .contact-main__grid{ grid-template-columns:1fr; gap:clamp(28px,4vw,50px); }
  .contact-map__head{ flex-direction:column; align-items:flex-start; }
  .contact-map__head .addr{ text-align:left; }
  .contact-map__frame{ aspect-ratio:4/3; }
  .contact-map__pin{ position:relative; left:auto; bottom:auto; max-width:none; margin:clamp(-44px,-6vw,-30px) var(--pad-x) 0; }
}
@media (max-width:520px){
  .contact-hero h1{ font-size:clamp(30px,8vw,72px); }
  /* File upload row — stack button and filename vertically */
  .file-field{ flex-wrap:wrap; gap:.6rem; }
  .file-field .file-name{ flex:1 1 100%; }
}