/* ==========================================================================
   Página de contacto
   Ritmo propio: banda oscura embutida en el papel con la palabra girada al
   borde, dos columnas (texto + formulario en ficha), los tres pasos y el mapa.
   Comparte tipografía, color y componentes con el resto del sitio.
   ========================================================================== */

/* ---------- 1 · Banda oscura a sangre ----------
   Mismo planteamiento que la portada de "El estudio": banda a sangre y hoja
   crema montada encima. El relleno vertical lo pone la regla general de
   .web-service-page; aquí solo se corrige el superior para que la miga no
   quede debajo del menú fijo. */
/* Igual que en El estudio: sin miga, el relleno superior se declara aquí. */
.cont-page main section.cont-cover{padding-top:calc(104px + clamp(2.2rem,4vw,3.6rem))}
.cont-cover{
  position:relative;overflow:hidden;isolation:isolate;
  background:#16120E;color:#fff;
}
.cont-cover__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cont-cover__bg i{position:absolute;display:block;border-radius:50%;filter:blur(110px)}
.cont-cover__bg i:nth-child(1){width:44vw;height:44vw;left:-10vw;top:-12vw;background:#e36539;opacity:.5}
.cont-cover__bg i:nth-child(2){width:36vw;height:36vw;right:-6vw;top:4vw;background:#7d9fe4;opacity:.3}
.cont-cover__bg i:nth-child(3){width:32vw;height:32vw;left:36vw;bottom:-16vw;background:#c9962e;opacity:.26}

.cont-cover__k{
  display:block;font-size:.75rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.cont-page main .cont-cover h1{
  margin:1.4rem 0 0;color:#fff;font-weight:500;
  font-size:clamp(2.9rem,7.4vw,6.4rem);letter-spacing:-.055em;line-height:1;
}
.cont-dot{color:#e36539}
.cont-cover__p{
  margin:1.8rem 0 0;max-width:46ch;
  font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.7;color:rgba(255,255,255,.74);
}
.cont-cover__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin-top:2.4rem;
  padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:.8125rem;color:rgba(255,255,255,.6);
}

/* La hoja crema, montada sobre la banda */
.cont-sheet{
  position:relative;z-index:2;
  margin-top:clamp(-6.5rem,-7vw,-4.5rem);
  background:var(--paper);
  border-radius:clamp(20px,3vw,34px) clamp(20px,3vw,34px) 0 0;
  padding-top:clamp(3.5rem,6vw,5.5rem);
}
.cont-page main .cont-sheet .cont-main{padding-top:0}

/* ---------- 2 · Texto y formulario ---------- */
.cont-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:start;
}
.cont-page main .cont-copy h2{
  margin:0;font-size:clamp(2rem,3.6vw,3.2rem);
  line-height:1.08;letter-spacing:-.05em;font-weight:500;
}
.cont-copy>p{margin:1.5rem 0 0;color:var(--gray);font-size:1rem;line-height:1.8;max-width:42ch}

.cont-details{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.7rem,3vw,2.4rem);
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--web-line);
}
.cont-details h3{
  margin:0 0 .75rem;font-size:.75rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#8c8279;
}
.cont-details p{font-size:1.05rem;font-weight:500;letter-spacing:-.02em;line-height:1.5}
.cont-details small{display:block;margin-top:.35rem;font-size:.8125rem;font-weight:400;color:var(--gray)}
.cont-details>div>a{
  display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.02em;
  text-decoration:none;padding:.12rem 0;
}
.cont-details>div>a:hover{color:#c34c29}
.cont-social{display:flex;flex-wrap:wrap;gap:.55rem}
.cont-social a{
  width:38px;height:38px;border-radius:50%;color:var(--ink);
  border:1px solid rgba(27,24,21,.16);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.cont-social a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.cont-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- La ficha del formulario ----------
   .home-refined desnuda .form-card; aquí la recuperamos como ficha y los
   campos pasan a filete inferior, más ligeros dentro de la caja. */
.cont-page .form-card{
  background:rgba(27,24,21,.035);
  border:1px solid rgba(27,24,21,.09);
  border-radius:clamp(14px,1.8vw,20px);
  padding:clamp(1.6rem,3vw,2.6rem);
}
.cont-form__title{margin:0;font-size:clamp(1.4rem,2.2vw,1.85rem);letter-spacing:-.04em;line-height:1.15;font-weight:500}
.cont-form__note{margin:.7rem 0 clamp(1.6rem,2.6vw,2.2rem);color:var(--gray);font-size:.9375rem;line-height:1.7;max-width:34ch}
.cont-page .field label{
  font-size:.6875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#8c8279;
}
.cont-page .field input,
.cont-page .field select,
.cont-page .field textarea{
  background-color:transparent;
  border:0;border-bottom:1px solid rgba(27,24,21,.2);border-radius:0;
  box-shadow:none;padding:.65rem 0;font-size:1rem;
}
.cont-page .field select{background-position:right .1rem center}
.cont-page .field textarea{min-height:84px}
.cont-page .field input:focus,
.cont-page .field select:focus,
.cont-page .field textarea:focus{
  background-color:transparent;
  border-bottom-color:#c34c29;box-shadow:0 1px 0 #c34c29;
}
.cont-page .f-foot{margin-top:1.9rem}

/* ---------- 3 · Qué pasa después ---------- */
.cont-steps{border-top:1px solid var(--web-line)}
.cont-steps-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,3rem);
}
.cont-steps-grid>li{border-top:1px solid var(--web-line);padding-top:1.3rem}
.cont-step-n{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;
  color:#a89d93;font-variant-numeric:tabular-nums;
}
.cont-page .cont-steps-grid h3{
  margin:clamp(1.8rem,3vw,2.6rem) 0 .8rem;
  font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.035em;line-height:1.2;
}
.cont-steps-grid p{color:var(--gray);font-size:.9375rem;line-height:1.75;max-width:34ch}

/* ---------- 4 · El mapa ---------- */
.cont-page main .cont-map{padding-top:0}
/* width:100% es necesario: con min-height y aspect-ratio, el ancho se derivaba
   de la altura y el mapa se salía del contenedor en pantallas estrechas. */
.cont-map__frame{
  position:relative;overflow:hidden;width:100%;
  border-radius:clamp(14px,2vw,22px);
  border:1px solid rgba(27,24,21,.1);
  background:rgba(27,24,21,.05);
  aspect-ratio:2.7/1;min-height:260px;
}
.cont-map__frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) contrast(1.04);
}
.cont-map__note{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;
  margin-top:1.1rem;font-size:.8125rem;color:var(--gray);
}

/* ---------- Adaptación ---------- */
@media (max-width:900px){
  .cont-grid{grid-template-columns:1fr;gap:2.6rem}
  .cont-copy>p{max-width:52ch}
  .cont-steps-grid{grid-template-columns:1fr}
  .cont-steps-grid p{max-width:52ch}
  .cont-page .cont-steps-grid h3{margin-top:1.1rem}
  .cont-map__frame{aspect-ratio:16/10}
}
@media (max-width:560px){
  .cont-page main section.cont-cover{padding-top:calc(78px + 2.5rem)}
  .cont-sheet{margin-top:-3.5rem}
  .cont-details{grid-template-columns:1fr;gap:1.6rem}
}

/* ===== Páginas legales (misma portada que contacto + prosa) ===== */
.legal-main .wrap{display:block}
.legal-prose{max-width:72ch;font-size:1.02rem;line-height:1.7;color:var(--gray)}
.legal-prose h2{margin:2.4rem 0 .8rem;font-size:clamp(1.35rem,2.1vw,1.75rem);letter-spacing:-.04em;line-height:1.15;font-weight:500;color:var(--ink)}
.legal-prose h2:first-child{margin-top:0}
.legal-prose p,.legal-prose li{margin-bottom:1rem}
.legal-prose ul{padding-left:1.2rem}
.legal-prose a{color:var(--ink)}
.legal-prose mark{background:rgba(201,150,46,.28);color:var(--ink);padding:0 .3em;border-radius:3px}