/* Página de contacto: cabecera con graffiti, formulario y datos de atención. */

.fr-contacto-hero {
  position: relative;
  background: var(--republic-black);
  padding-block: var(--space-7);
  overflow: hidden;
}
/* La textura de graffiti va más marcada que en el resto del sitio: acá es el
   único fondo de la sección. */
.fr-contacto-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--graffiti-url);
  background-size: 560px;
  background-repeat: repeat;
  opacity: 0.16;
  pointer-events: none;
}
.fr-contacto-hero__inner { position: relative; z-index: 1; }
.fr-contacto-hero__kicker {
  color: var(--accent);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* 66px es el tamaño medido en el Figma: "HABLANOS." ocupa ahí unos 500 px de
   los 1440 del frame. */
.fr-contacto-hero__titulo {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 66px);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-top: var(--space-3);
}
.fr-contacto-hero__cta { margin-top: var(--space-4); }

/* --- Cuerpo: formulario a la izquierda, datos a la derecha --------------- */

.fr-contacto-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.fr-form-card {
  background: var(--surface-card);
  border: 1px solid var(--steel);
  border-radius: 20px;
  padding: var(--space-6) var(--space-5);
}
/* Entra en un solo renglón dentro de la tarjeta, como en el Figma; con el
   display-md del sistema (32px) se partía en dos. */
.fr-form-card__titulo {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 23px);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.fr-form { display: grid; gap: var(--space-4); }
.fr-form .fr-btn { margin-top: var(--space-2); }

/* Aviso de resultado del envío. Va dentro del formulario y después del botón:
   es la respuesta a lo que se acaba de hacer, así que se lee donde terminó el
   gesto. Al estar dentro de la rejilla hereda su separación, en vez de quedar
   pegado al campo de al lado. Recibe foco al aparecer para que un lector de
   pantalla lo anuncie sin que haga falta buscarlo. */
.fr-aviso {
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm);
  border: 1px solid;
}
.fr-aviso--ok { border-color: var(--success); color: var(--success); background: rgba(46, 204, 113, 0.08); }
.fr-aviso--error { border-color: var(--error); color: var(--error); background: rgba(231, 76, 60, 0.08); }
/* El aviso recibe el foco por JS y el anillo general es magenta, que sobre un
   mensaje de éxito se lee como un error. Cada estado usa el suyo. */
.fr-aviso:focus-visible { outline: none; }
.fr-aviso--ok:focus-visible {
  box-shadow: 0 0 0 2px var(--republic-black), 0 0 0 4px var(--success);
}
.fr-aviso--error:focus-visible {
  box-shadow: 0 0 0 2px var(--republic-black), 0 0 0 4px var(--error);
}

/* Aviso legal de reCAPTCHA. Google deja esconder su distintivo flotante siempre
   que este texto quede visible junto al formulario, y el distintivo tapaba la
   esquina inferior derecha del diseño. */
.fr-form__legal {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
  text-align: center;
}
.fr-form__legal a { text-decoration: underline; }

.grecaptcha-badge { visibility: hidden; }

/* --- Datos de atención --------------------------------------------------- */

.fr-datos-col { display: grid; gap: var(--space-6); }
/* Estos rótulos van en Inter, no en la display: en el Figma "HORARIO DE
   ATENCIÓN" y "SEGUINOS" son texto en negrita con tracking, del mismo peso
   visual que las etiquetas de los campos. */
.fr-datos-col__titulo {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.fr-horarios { display: grid; }
.fr-horarios__fila {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--steel);
  font-size: var(--text-body-md);
}
.fr-horarios__fila strong { font-weight: 700; }

.fr-contacto-directo { display: flex; align-items: center; gap: var(--space-3); }
.fr-contacto-directo a { font-weight: 700; }
.fr-contacto-directo a:hover { color: var(--accent); }

.fr-social-redondo { display: flex; gap: var(--space-3); }
.fr-social-redondo a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--concrete-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--republic-white);
  transition: background var(--dur-rapida) var(--ease-suave);
}
.fr-social-redondo a:hover { background: var(--accent); color: var(--text-on-magenta); }

@media (max-width: 900px) {
  /* En móvil el formulario va primero y los datos debajo, como en el Figma. */
  .fr-contacto-cuerpo { grid-template-columns: 1fr; gap: var(--space-6); }
  .fr-form-card { padding: var(--space-5) var(--space-4); }
  .fr-contacto-hero__cta .fr-btn { width: 100%; }
}