/* =====================================================================
   Página "Contacto"
   Bloques cont-* (botones en buttons.css). Incluye estilos para el
   formulario de Contact Form 7 dentro de .cont-form__box.
   ===================================================================== */

/* ---------- Hero ---------- */
.cont-hero {
  display: flex;
  align-items: center;
  min-height: 520px;
  padding-block: var(--fdq-space-xl);
  background-image: url("../../images/contacto/ferreteria-duque-madrid-contacto.webp");
  background-size: cover;
  background-position: center;
}
.cont-hero__inner {
  width: 100%;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-lg);
}
.cont-hero__title {
  margin: 0;
  max-width: 42rem;
  color: #fff;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.15;
  letter-spacing: var(--fdq-tracking-tight-2);
}
.cont-hero__cta { gap: var(--fdq-space-md); flex-wrap: wrap; }
.cont-hero__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fdq-space-md);
  width: 100%;
  max-width: 42rem;
}
.cont-hero__badges > * { margin-block: 0; }
.cont-trust {
  display: flex;
  align-items: center;
  gap: var(--fdq-space-xs);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.cont-trust .material-symbols-outlined { font-size: 20px; color: var(--fdq-secondary-container); }
.cont-trust .fdq-icon-img { width: 20px; height: 20px; }

/* ---------- Visítenos ---------- */
.cont-visit { padding-block: 80px; }
.cont-visit__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-xl);
  align-items: start;
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.cont-visit__title { color: var(--fdq-primary-container); }
.cont-visit__info { display: flex; flex-direction: column; gap: var(--fdq-space-md); }
.cont-card {
  display: flex;
  align-items: flex-start;
  gap: var(--fdq-space-md);
  padding: var(--fdq-space-md);
  background-color: #fff;
  border: 1px solid var(--fdq-outline-variant);
  border-radius: var(--fdq-radius-lg);
}
.cont-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  background-color: var(--fdq-surface-container);
  border-radius: var(--fdq-radius-md);
}
.cont-card__icon .material-symbols-outlined { color: var(--fdq-primary-container); }
.cont-card__icon .fdq-icon-img { width: 24px; height: 24px; }
.cont-card__body > * { margin: 0; }
.cont-card__title { margin: 0 0 var(--fdq-space-base); font-size: 18px; color: var(--fdq-primary-container); }
.cont-card__text { color: var(--fdq-on-surface-variant); }
.cont-visit__quote {
  padding: var(--fdq-space-lg);
  background-color: #fff;
  border-left: 4px solid var(--fdq-secondary-container);
  border-radius: var(--fdq-radius-lg);
  box-shadow: var(--fdq-shadow-sm);
}
.cont-visit__quote-text {
  margin: 0;
  font-style: italic;
  font-size: var(--fdq-fs-body-lg);
  line-height: 1.7;
  color: var(--fdq-on-surface-variant);
}

/* ---------- Formulario ---------- */
.cont-form { padding-block: 80px; }
.cont-form__inner { max-width: 56rem; margin-inline: auto; padding-inline: var(--fdq-space-md); }
.cont-form__head { display: flex; flex-direction: column; gap: var(--fdq-space-base); text-align: center; margin-bottom: var(--fdq-space-lg); }
.cont-form__title { margin: 0; color: var(--fdq-primary-container); }
.cont-form__subtitle { margin: 0; font-weight: 600; color: var(--fdq-on-surface-variant); }
.cont-form__box {
  padding: var(--fdq-space-md);
  background-color: #fff;
  border-radius: 24px;
  box-shadow: var(--fdq-shadow-lg);
}

/* Contact Form 7 — maquetado igual que el diseño (code.html) */
.cont-form__box .wpcf7-form > p { margin: 0; }
.cont-form__box br { display: none; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0 0 var(--fdq-space-md); }
.cont-form__box .cf7-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fdq-space-md);
}
.cont-form__box .cf7-row .cf7-field { margin: 0; }
.cont-form__box .cf7-field { display: flex; flex-direction: column; gap: var(--fdq-space-xs); }
.cont-form__box .cf7-field > label,
.cont-form__box label { font-size: 14px; font-weight: 700; color: var(--fdq-primary-container); }
.cont-form__box .wpcf7-form-control-wrap { display: block; }
.cont-form__box input[type="text"],
.cont-form__box input[type="tel"],
.cont-form__box input[type="email"],
.cont-form__box select,
.cont-form__box textarea {
  width: 100%;
  padding: var(--fdq-space-sm);
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: var(--fdq-radius-lg);
  font-family: var(--fdq-font-body);
  font-size: 16px;
  color: var(--fdq-on-surface);
}
.cont-form__box textarea { min-height: 8rem; resize: vertical; }
.cont-form__box select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2344474d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--fdq-space-sm) center;
}
.cont-form__box input:focus,
.cont-form__box select:focus,
.cont-form__box textarea:focus {
  outline: none;
  border-color: var(--fdq-secondary-container);
  box-shadow: 0 0 0 3px rgba(31, 192, 255, 0.30);
}
.cont-form__box .wpcf7-submit {
  width: 100%;
  margin-top: var(--fdq-space-xs);
  padding: 20px;
  background-color: var(--fdq-primary);
  color: #fff;
  border: none;
  border-radius: var(--fdq-radius-xl);
  font-family: var(--fdq-font-heading);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--fdq-shadow-lg);
  transition: filter var(--fdq-duration-base) var(--fdq-ease-out);
}
.cont-form__box .wpcf7-submit:hover { filter: brightness(1.12); }
.cont-form__box .cf7-note { margin: var(--fdq-space-sm) 0 0; font-size: 10px; text-align: center; color: #9ca3af; }

/* ---------- Avisos de CF7 (enviado / spam / error) ---------- */
.cont-form__box .wpcf7-response-output {
  display: flex;
  align-items: flex-start;
  gap: var(--fdq-space-xs);
  margin: var(--fdq-space-md) 0 0;
  padding: var(--fdq-space-sm);
  border: 1px solid transparent;
  border-radius: var(--fdq-radius-lg);
  font-size: 15px;
  font-weight: 600;
  line-height: var(--fdq-lh-base);
}
.cont-form__box .wpcf7-response-output::before {
  flex-shrink: 0;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

/* Estado inicial / enviando: sin recuadro visible */
.cont-form__box .wpcf7-form.init .wpcf7-response-output,
.cont-form__box .wpcf7-form.submitting .wpcf7-response-output {
  display: none;
}

/* Enviado correctamente → verde */
.cont-form__box .wpcf7-form.sent .wpcf7-response-output {
  color: var(--fdq-on-success-container);
  background-color: var(--fdq-success-container);
  border-color: var(--fdq-success);
}
.cont-form__box .wpcf7-form.sent .wpcf7-response-output::before {
  content: "check_circle";
  color: var(--fdq-success);
}

/* Error de validación o fallo de envío → rojo */
.cont-form__box .wpcf7-form.invalid .wpcf7-response-output,
.cont-form__box .wpcf7-form.unaccepted .wpcf7-response-output,
.cont-form__box .wpcf7-form.payment-required .wpcf7-response-output,
.cont-form__box .wpcf7-form.failed .wpcf7-response-output,
.cont-form__box .wpcf7-form.aborted .wpcf7-response-output {
  color: var(--fdq-on-error-container);
  background-color: var(--fdq-error-container);
  border-color: var(--fdq-error);
}
.cont-form__box .wpcf7-form.invalid .wpcf7-response-output::before,
.cont-form__box .wpcf7-form.unaccepted .wpcf7-response-output::before,
.cont-form__box .wpcf7-form.payment-required .wpcf7-response-output::before,
.cont-form__box .wpcf7-form.failed .wpcf7-response-output::before,
.cont-form__box .wpcf7-form.aborted .wpcf7-response-output::before {
  content: "error";
  color: var(--fdq-error);
}

/* Bloqueado por spam → ámbar (aviso, ni rojo ni verde) */
.cont-form__box .wpcf7-form.spam .wpcf7-response-output {
  color: var(--fdq-on-warning-container);
  background-color: var(--fdq-warning-container);
  border-color: var(--fdq-warning);
}
.cont-form__box .wpcf7-form.spam .wpcf7-response-output::before {
  content: "shield";
  color: var(--fdq-warning);
}

/* Campos no válidos: borde rojo + aviso bajo el campo */
.cont-form__box .wpcf7-form .wpcf7-not-valid {
  border-color: var(--fdq-error);
}
.cont-form__box .wpcf7-form .wpcf7-not-valid:focus {
  border-color: var(--fdq-error);
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.25);
}
.cont-form__box .wpcf7-not-valid-tip {
  margin-top: var(--fdq-space-base);
  color: var(--fdq-error);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Ayuda inmediata ---------- */
.cont-help { padding-block: var(--fdq-space-lg); }
.cont-help__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-md);
  max-width: var(--fdq-container-max);
  margin-inline: auto;
  padding-inline: var(--fdq-space-md);
}
.cont-help__text { display: flex; flex-direction: column; gap: var(--fdq-space-base); }
.cont-help__title { margin: 0; color: #fff; }
.cont-help__lead { margin: 0; color: rgba(255, 255, 255, 0.85); }
.cont-help__cta { flex-shrink: 0; }

/* ---------- Instagram ---------- */
.cont-instagram { padding-block: 64px; }
.cont-instagram__inner { max-width: var(--fdq-container-max); margin-inline: auto; padding-inline: var(--fdq-space-md); }
.cont-instagram__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fdq-space-md);
  margin-bottom: var(--fdq-space-lg);
}
.cont-instagram__heading > * { margin: 0; }
.cont-instagram__title { margin: 0; color: var(--fdq-primary-container); }
.cont-instagram__handle { margin: 0; font-weight: 600; color: var(--fdq-on-surface-variant); }
.cont-instagram__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fdq-space-md);
}
.cont-instagram__grid > * { margin-block: 0; }
.cont-insta-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--fdq-radius-xl);
  background-color: var(--fdq-surface-dim);
  box-shadow: var(--fdq-shadow-sm);
  overflow: hidden;
}
.cont-insta-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cont-insta-item--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.cont-insta-item--logo img {
  width: 70%;
  height: auto;
  object-fit: contain;
}

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .cont-hero__badges { grid-template-columns: repeat(4, 1fr); }
  .cont-visit__inner { grid-template-columns: 1fr 1fr; }
  .cont-form__box { padding: 48px; }
  .cont-form__box .cf7-row { grid-template-columns: 1fr 1fr; }
  .cont-help__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cont-instagram__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .cont-instagram__grid { grid-template-columns: repeat(4, 1fr); }
}