/* ==========================================================================
   Contacte · Edicions del Bullent  (views/plantillas/bullent/contacto.ejs)
   ========================================================================== */

.contacto { padding-bottom: 4rem; }
.contacto__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
.contacto__datos { max-width: none; }
.contacto__subtitulo { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 1.25rem; }

#form-contacto {
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--shadow-sm);
}
.campo { margin-bottom: 1rem; flex: 1 1 12rem; min-width: 0; }
.campo--corto { flex: 0 1 7rem; }
.campo-fila { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3rem; color: var(--c-ink); }
.campo input[type="text"], .campo input[type="email"], .campo select, .campo textarea {
	width: 100%; padding: .6rem .75rem; font: inherit; color: var(--c-ink); background: #fff;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
	outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary);
}

.campo-check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .75rem; }
.campo-check input { margin-top: .3rem; accent-color: var(--c-primary); }
.campo-check a { text-decoration: underline; }

.contacto__docent { border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 1rem 1rem 0; margin: 0 0 1rem; }
.contacto__docent[hidden] { display: none; }
.contacto__docent legend { padding: 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--c-ink-soft); }

/* campo trampa antispam: fuera de pantalla, no display:none (los bots lo rellenan igual) */
.contacto__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contacto__estado { min-height: 1.5rem; margin: .5rem 0 1rem; font-weight: 600; }
.contacto__estado--ok { color: #1d6b2f; }
.contacto__estado--error { color: #b3261e; }
.contacto__enviar[disabled] { opacity: .6; cursor: wait; }

@media (max-width: 860px) {
	.contacto__rejilla { grid-template-columns: minmax(0, 1fr); }
}