/* =========================================================================
   AMPLIACIÓN DE ESTILOS — 28/07/2026
   Se carga DESPUÉS de styles.css (desde views/home.head.php), de modo que
   estas reglas sobrescriben a las de styles.css sin tener que tocarlo.

   Contiene: 1) botón de contacto flotante, 2) logo de cabecera más grande,
   3) imagen final de contacto a todo el ancho de su columna.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. BOTÓN DE CONTACTO FLOTANTE
   Siempre visible, fijo a media altura en el borde derecho. En formato
   pestaña vertical para que no tape los campos del formulario, que en
   escritorio ocupa esa misma zona de la pantalla.
   ------------------------------------------------------------------------- */
.float-contact {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;

  /* En vertical-rl el eje "row" del flex va de arriba a abajo:
     el icono queda encima del texto y la pestaña sale estrecha. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 26px 12px;
  writing-mode: vertical-rl;

  background-color: var(--color-gold);
  color: #272626;
  border: 1px solid var(--color-gold);

  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);

  transition: background-color .25s ease, color .25s ease;
}
.float-contact:hover,
.float-contact:focus {
  background-color: #ece7dd;
  border-color: #ece7dd;
  color: #272626;
  text-decoration: none;
}
.float-contact:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
.float-contact .float-contact-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

@media (max-width: 768px) {
  .float-contact {
    padding: 20px 10px;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 2px;
  }
  .float-contact .float-contact-icon {
    width: 16px;
    height: 16px;
  }
}


/* -------------------------------------------------------------------------
   2. LOGO THE ARCH MÁS GRANDE EN CABECERA
   Original: 250px (desktop) / 160px (<=992px)
   ------------------------------------------------------------------------- */
.main-header .header-info .main-header-logo img {
  width: 380px;
  max-width: 380px;
}
@media (max-width: 1400px) {
  .main-header .header-info .main-header-logo img {
    width: 320px;
    max-width: 320px;
  }
}
@media (max-width: 992px) {
  .main-header .header-info .main-header-logo img {
    width: 240px;
    max-width: 240px;
  }
}
@media (max-width: 576px) {
  .main-header .header-info .main-header-logo img {
    width: 200px;
    max-width: 200px;
  }
}


/* -------------------------------------------------------------------------
   4. CLAIM DEL PIE CON EL MISMO FORMATO QUE LOS TÍTULOS DE SECCIÓN
   Mismo tratamiento que "Mucho más que una vivienda cerca del mar"
   (.section-title.serif): Heurística cursiva, 42px, sin mayúsculas.
   ------------------------------------------------------------------------- */
.contact .contact-info .subtitle.contact-claim {
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-heading-light);
  margin-top: 0;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  .contact .contact-info .subtitle.contact-claim {
    font-size: 24px;
    margin-bottom: 30px;
  }
}


/* -------------------------------------------------------------------------
   5. IMAGEN FINAL DE CONTACTO (montaje IBOSA)
   La imagen ocupa TODO el ancho de su columna (izquierda), sin márgenes
   internos, y el formulario mantiene su propia columna a la derecha.
   Como la imagen es casi cuadrada (1500x1158), la sección crece en alto
   lo necesario en vez de recortar o encoger la imagen.
   ------------------------------------------------------------------------- */
@media (min-width: 1201px) {
  /* La sección deja de estar clavada a 100vh: crece con la imagen */
  .contact {
    height: auto;
    min-height: max(100vh, 900px);
  }
  .contact .contact-bg {
    position: relative;
    height: auto;
    min-height: max(100vh, 900px);
    display: flex;
    align-items: center;
  }
  /* La columna izquierda pasa a flujo normal y llega hasta la línea del formulario.
     550px = ancho real del formulario sticky | 40px = aire hasta su línea divisoria */
  .contact .contact-bg .contact-info {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    height: auto;
    width: auto;
    max-width: none;
    flex: 1 1 auto;
    margin-right: 590px;
    padding: 90px 0 90px var(--padding-container-x);
  }
  /* La imagen ocupa el 100% de la columna */
  .contact .contact-info .main-header-logo.contact-image {
    width: 100%;
  }
  .contact .contact-info .main-header-logo.contact-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
  /* El logo de IBOSA baja al flujo, justo debajo de la imagen y centrado en la columna */
  .contact .contact-promoter {
    position: static;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    margin-top: 50px;
  }
}

/* Pantallas muy anchas: el contenido se centra en el contenedor de 2250px,
   igual que hace styles.css con la cabecera y el formulario. */
@media (min-width: 2250px) {
  .contact .contact-bg .contact-info {
    padding-left: calc(((100vw - var(--max-width-container)) / 2) + var(--padding-container-x));
    margin-right: calc(((100vw - var(--max-width-container)) / 2) + 710px);
  }
}

/* Tablet y móvil: una sola columna, la imagen ocupa todo el ancho disponible */
@media (max-width: 1200px) {
  .contact .contact-info .main-header-logo.contact-image {
    width: 100%;
  }
  .contact .contact-info .main-header-logo.contact-image img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    display: block;
  }
}