/* Macabu – estado del formulario de contacto (.contacto-portafolio) */
:root {
  --cf-primary: #0B2545;
  --cf-accent:  #13A89E;
  --cf-ok-bg:   #E8F7F5;
  --cf-ok-bd:   #13A89E;
  --cf-ok-tx:   #0B5A54;
  --cf-err-bg:  #FDECEC;
  --cf-err-bd:  #E5484D;
  --cf-err-tx:  #8A1F23;
}

/* Contenedor del mensaje de respuesta */
.resp-message {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  padding: 12px 34px 14px 14px;
  border: 1px solid var(--cf-ok-bd);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--cf-ok-bg);
  color: var(--cf-ok-tx);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 4px 14px rgba(11, 37, 69, .10);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.resp-message[hidden] { display: none; }
.resp-message.is-visible { opacity: 1; transform: translateY(0); }

.resp-message--error {
  border-color: var(--cf-err-bd);
  background: var(--cf-err-bg);
  color: var(--cf-err-tx);
}

.resp-message__icon { flex: 0 0 auto; font-size: 16px; margin-top: 1px; }
.resp-message__text { flex: 1 1 auto; font-weight: 500; }

.resp-message__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.resp-message__close:hover { opacity: 1; }

/* Barra de cuenta regresiva (dura lo mismo que el mensaje: 10 s) */
.resp-message__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--cf-ok-bd);
  transform-origin: left center;
}
.resp-message--error .resp-message__bar { background: var(--cf-err-bd); }
.resp-message.is-visible .resp-message__bar {
  animation: cf-countdown var(--cf-duration, 10s) linear forwards;
}
@keyframes cf-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Estado del botón durante el envío */
.contacto-portafolio .btn-send[disabled] { opacity: .7; cursor: not-allowed; }

/* Honeypot anti-spam (invisible para personas) */
.portafolio .cf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;


  visibility: hidden;
  background: red;
}

@media (prefers-reduced-motion: reduce) {
  .resp-message { transition: none; }
  .resp-message.is-visible .resp-message__bar { animation: none; }
}