/* ===========================================================
   CONTACTO — ajustes sobre la hoja global (Figma node 1:1189).
   Solo se carga en template-contacto.php.
   Objetivos: (1) título alineado con el formulario;
   (2) banda datos+mapa a container fluido, mapa a sangre por la
   derecha y panel marrón dentro del container.
   =========================================================== */

/* ── Título alineado con el formulario (mismo borde ~55px) ── */
.page-title{
  max-width:1440px;margin:0 auto;
  padding:54px clamp(20px,4vw,55px) 0;
  font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.2;
  text-transform:uppercase;letter-spacing:.04em;
  color:rgba(14,14,14,.6);
}
.page-title em{font-style:italic;font-weight:500;color:var(--gold);text-transform:none}

/* Formulario: mismo container → alineado a 55px, ancho ~1330 */
.cform{max-width:1440px;padding:36px clamp(20px,4vw,55px) 64px}

/* ── Banda datos + mapa ────────────────────────────────────
   .cinfo pasa a full-bleed; el mapa se posiciona absoluto a la
   derecha (sangra al borde); el contenido (marrón + cómo llegar)
   vive en un container centrado de máx 1440. */
.cinfo{
  display:block;max-width:none;width:100%;
  position:relative;background:#f2e9de;overflow:hidden;
  margin-top:40px;
}
.cinfo__map{
  position:absolute;top:0;right:0;bottom:0;left:auto;
  width:clamp(340px,42vw,660px);min-height:0;
}
.cinfo__map img{width:100%;height:100%;object-fit:cover;display:block}

.cinfo__inner{
  position:relative;z-index:1;
  max-width:1440px;margin:0 auto;
  padding-left:clamp(20px,4vw,55px);
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  min-height:517px;
}
/* Panel marrón: icono ARRIBA + texto CENTRADO (Figma) */
.cinfo__panel{
  grid-column:1;height:100%;position:relative;
  background:var(--gold);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:46px;padding:54px 40px;text-align:center;
}
/* El oro sangra hasta el borde izquierdo de la pantalla (unifica la franja izq.) */
.cinfo__panel::before{
  content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;
  background:var(--gold);z-index:0;
}
.cinfo__panel .cinfo__item{position:relative;z-index:1}
.cinfo__panel .cinfo__item{display:flex;flex-direction:column;align-items:center;gap:12px}
.cinfo__panel .cinfo__ic{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
.cinfo__panel .cinfo__txt{font-size:20px;line-height:26px;letter-spacing:.02em;color:#fff}
.cinfo__panel .cinfo__txt strong{font-weight:700}

.cinfo__dir{
  grid-column:2;align-self:center;
  max-width:360px;padding:40px 40px 40px 46px;
}

/* ── Responsive: apilar mapa debajo, una columna ── */
@media (max-width:980px){
  .cinfo{margin-top:32px}
  .cinfo__map{position:static;width:100%;height:320px}
  .cinfo__inner{grid-template-columns:1fr;padding-left:0;min-height:0}
  .cinfo__panel{padding:44px clamp(20px,5vw,45px)}
  .cinfo__dir{max-width:none;padding:32px clamp(20px,5vw,46px);align-self:auto}
}
@media (max-width:600px){
  .cinfo__map{height:240px}
}