/* ============================================================================
   CONTACTO (imagen) + FOOTER · Pinto + Pizarro Arquitectos
   La banda de título "CONTACTANOS" reutiliza .banda-intro (ver tarjetas.css)
   ============================================================================ */

:root{
  /* Color de los iconos del footer (tomado del diseño).
     Cámbialo a #F96611 si los quieres en el naranja de la marca. */
  --color-iconos:#7B2D8E;
}

/* ---------------------------------------------------------------------------
   1) IMAGEN DE CONTACTO
   Ocupa el tamaño de la ventana. Si la ventana es más alta que ancha,
   la imagen se recorta (object-fit:cover) en vez de deformarse.
   --------------------------------------------------------------------------- */
#contacto-imagen{
  width:100%;
  height:100vh;
  overflow:hidden;
  /* Drop shadow de la seccion CONTACTANOS: al final de la imagen, es la que
     separa la seccion del footer. Bajo el titulo ya no va. */
  position:relative;
}
#contacto-imagen img{
  width:100%;
  height:100%;
  object-fit:cover;   /* se va cortando para tomar el tamaño de la pantalla */
  display:block;
}

/* ---------------------------------------------------------------------------
   2) FOOTER
   Referencia 1920x1080 -> 1920 x 370  (370/1080 = 34.26vh)
   Si la ventana es más alta que ancha -> ocupa la ventana completa.
   --------------------------------------------------------------------------- */
.footer{
  width:100%;
  height:34.26vh;
  min-height:320px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;                 /* contenido centrado en el footer */
  gap:clamp(18px,3vh,34px);
  padding:22px clamp(20px,3vw,60px) 26px;
  font-family:'Segoe UI', system-ui, sans-serif;
  color:#14100C;
}

/* Logo completo, naranja — tamaño pedido: 183 x 220 */
.footer-logo{
  width:183px;
  height:220px;
  object-fit:contain;   /* respeta la proporción dentro de la caja */
  display:block;
  flex-shrink:0;
}

/* Fila inferior: contacto · iconos · crédito
   Grilla 1fr / auto / 1fr  ->  las dos columnas laterales miden lo mismo,
   por lo que la columna del centro (los iconos) queda EXACTAMENTE centrada.
   column-gap:60px  ->  60px entre el texto izquierdo y los iconos,
                        y 60px entre los iconos y el texto derecho.        */
.footer-barra{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:60px;
}
.footer-contacto{ justify-self:end;    text-align:right; }  /* termina a 60px de los iconos */
.footer-redes   { justify-self:center; }
.footer-credito { justify-self:start;  text-align:left;  }  /* empieza a 60px de los iconos */

.footer-contacto,
.footer-credito{
  margin:0;
  font-size:clamp(13px, 1.35vw, 20px);   /* 20px en escritorio, se adapta en pantallas chicas */
  font-weight:400;
  line-height:1.3;
}
.footer-contacto strong{ font-weight:600; }

/* Correo bajo el nombre del autor */
.footer-credito{ line-height:1.45; }
.footer-mail{
  color:inherit;
  text-decoration:none;
  opacity:.85;
  transition:opacity 140ms ease;
}
.footer-mail:hover{ opacity:1; text-decoration:underline; }

.footer-redes{ display:flex; align-items:center; gap:20px; }
.footer-redes a{
  display:flex; align-items:center; justify-content:center;
  transition:transform 120ms ease;
}
.footer-redes a:hover{ transform:translateY(-4px); }
/* Iconos entregados por el cliente (WebP con transparencia, naranja de marca) */
.footer-redes img{
  width:auto;
  height:clamp(22px,1.7vw,30px);
  object-fit:contain;
  display:block;
}

/* ---------------------------------------------------------------------------
   3) VERTICAL (alto > ancho): el footer ocupa la ventana completa
   --------------------------------------------------------------------------- */
@media (orientation:portrait){
  .footer{
    height:100vh;
    justify-content:center;
    gap:clamp(24px,5vh,60px);
    text-align:center;
  }
  .footer-barra{
    grid-template-columns:1fr;      /* apilado: una sola columna */
    justify-items:center;
    row-gap:clamp(18px,3vh,32px);
  }
  .footer-contacto,
  .footer-credito{
    justify-self:center;
    text-align:center;
    /* En vertical el clamp de escritorio (1.35vw) se iba al minimo de 13px y
       el texto quedaba ilegible: en un telefono de 390px daba 5px de vw.
       Aqui se recalcula contra el ancho real del telefono. */
    font-size:clamp(17px, 4.4vw, 26px);
  }
}