/* =====================================================================
   Plantilla «Contacto sencillo» (page-contacto-sencillo.php).

   Datos a un lado, formulario al otro. El formulario es de Forminator, que
   trae sus propios colores claros; aquí se le pone la ropa del sitio: campos
   oscuros, borde fino, foco naranja y el botón como los demás botones.
   Los selectores van largos y con !important en lo justo porque Forminator
   imprime sus estilos con el id del formulario, que pesa más que una clase.
   ===================================================================== */

.dk-csimple { position: relative; }

/* --------------------------------------------- bloque de formularios */
.dk-csimple--forms { padding-top: clamp(1rem, 3vw, 2.4rem); scroll-margin-top: calc(var(--nav-alto) + 12px); }
.dk-csimple--forms .dk-contenedor { max-width: 860px; }
.dk-csimple__cab { text-align: center; }
.dk-csimple__titulo { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.06; margin: 0; }

/* Pestañas: una cápsula con dos mitades, la activa en naranja. */
.dk-csimple__tabs {
	display: flex; width: max-content; max-width: 100%; margin: 1.4rem auto 1.4rem; padding: 5px; gap: 4px;
	border: 1px solid var(--linea); border-radius: 99px; background: rgb(255 255 255 / .03);
}
.dk-csimple__tab {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px;
	border-radius: 99px; color: var(--ceniza); text-decoration: none;
	font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	transition: background-color .3s, color .3s;
}
.dk-csimple__tab:hover { color: var(--tiza); }
.dk-csimple__tab.is-activa { background: var(--flama-honda); color: #fff; }
@media (max-width: 420px) { .dk-csimple__tab { padding: 0 16px; letter-spacing: .08em; } }

/* Sin JS no hay pestañas: se ven los dos formularios uno tras otro. */
html:not(.dk-csimple-js) .dk-csimple__tabs { display: none; }
html:not(.dk-csimple-js) .dk-csimple__form + .dk-csimple__form { margin-top: 1.6rem; }
.dk-csimple__form[hidden] { display: none; }

.dk-csimple__intro { margin: 0 0 1.4rem; color: #cdc5bf; font-size: .95rem; line-height: 1.55; }
.dk-csimple__intro strong { color: var(--tiza); font-weight: 700; }

/* --------------------------------------------------------- la tarjeta */
.dk-csimple__form {
	position: relative; padding: clamp(1.4rem, 3vw, 2.4rem);
	border: 1px solid var(--linea); border-radius: 22px;
	background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .015));
}

/* ------------------------------------------------- Forminator, vestido */
.dk-csimple__form .forminator-ui,
.dk-csimple__form .forminator-ui * { font-family: inherit !important; box-sizing: border-box; }
.dk-csimple__form .forminator-ui.forminator-custom-form { margin: 0 !important; padding: 0 !important; background: transparent !important; }
.dk-csimple__form .forminator-ui .forminator-row { margin-bottom: 18px !important; }
.dk-csimple__form .forminator-ui .forminator-row:last-child { margin-bottom: 0 !important; }

.dk-csimple__form .forminator-ui .forminator-label {
	display: block; margin: 0 0 8px !important; padding: 0 !important;
	font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .14em !important;
	text-transform: uppercase !important; color: var(--ceniza) !important; line-height: 1.3 !important;
}
.dk-csimple__form .forminator-ui .forminator-required { color: var(--flama) !important; }
.dk-csimple__form .forminator-ui .forminator-description { color: rgb(138 129 123 / .85) !important; font-size: .78rem !important; }

.dk-csimple__form .forminator-ui .forminator-input,
.dk-csimple__form .forminator-ui .forminator-textarea,
.dk-csimple__form .forminator-ui select,
.dk-csimple__form .forminator-ui .select2-selection {
	width: 100% !important; min-height: 52px; margin: 0 !important; padding: 14px 18px !important;
	border: 1px solid var(--linea) !important; border-radius: 14px !important;
	background: #151212 !important; color: var(--tiza) !important; box-shadow: none !important;
	font-size: .95rem !important; line-height: 1.4 !important; outline: none !important;
	transition: border-color .25s, background-color .25s !important;
}
.dk-csimple__form .forminator-ui .forminator-textarea { min-height: 140px !important; resize: vertical; }
.dk-csimple__form .forminator-ui .forminator-input::placeholder,
.dk-csimple__form .forminator-ui .forminator-textarea::placeholder { color: rgb(138 129 123 / .65) !important; }
.dk-csimple__form .forminator-ui .forminator-input:hover,
.dk-csimple__form .forminator-ui .forminator-textarea:hover { border-color: rgb(255 255 255 / .18) !important; }
.dk-csimple__form .forminator-ui .forminator-input:focus,
.dk-csimple__form .forminator-ui .forminator-textarea:focus,
.dk-csimple__form .forminator-ui .select2-container--open .select2-selection {
	border-color: var(--flama) !important; background: #110e0d !important;
}
.dk-csimple__form .forminator-ui .select2-selection__rendered { color: var(--tiza) !important; padding: 0 !important; line-height: 1.4 !important; }

/* Casillas y opciones */
.dk-csimple__form .forminator-ui .forminator-checkbox,
.dk-csimple__form .forminator-ui .forminator-radio { color: #cdc5bf !important; font-size: .9rem !important; }
.dk-csimple__form .forminator-ui .forminator-checkbox-box,
.dk-csimple__form .forminator-ui .forminator-radio-bullet {
	border: 1px solid rgb(255 255 255 / .25) !important; background: #151212 !important;
}
.dk-csimple__form .forminator-ui input:checked + .forminator-checkbox-box,
.dk-csimple__form .forminator-ui input:checked + .forminator-radio-bullet { border-color: var(--flama) !important; background: var(--flama-honda) !important; color: #fff !important; }

/* Archivos (para quien adjunta un brief) */
.dk-csimple__form .forminator-ui .forminator-button-upload {
	border: 1px solid var(--linea) !important; background: transparent !important; color: var(--tiza) !important; border-radius: 99px !important;
}

/* El botón de enviar: como los botones del sitio */
.dk-csimple__form .forminator-ui .forminator-button-submit,
.dk-csimple__form .forminator-ui button[type="submit"] {
	display: inline-flex !important; align-items: center; justify-content: center;
	min-height: 54px !important; margin: 6px 0 0 !important; padding: 0 34px !important;
	border: 0 !important; border-radius: 99px !important; box-shadow: none !important;
	background: var(--flama-honda) !important; color: #fff !important;
	font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
	cursor: pointer; transition: background-color .3s, color .3s !important;
}
.dk-csimple__form .forminator-ui .forminator-button-submit:hover,
.dk-csimple__form .forminator-ui button[type="submit"]:hover { background: var(--tiza) !important; color: var(--tinta) !important; }
@media (max-width: 640px) {
	.dk-csimple__form .forminator-ui .forminator-button-submit,
	.dk-csimple__form .forminator-ui button[type="submit"] { width: 100% !important; }
}

/* Mensajes de error y de envío */
.dk-csimple__form .forminator-ui .forminator-error-message { margin-top: 6px !important; background: transparent !important; color: #ff8a70 !important; font-size: .8rem !important; padding: 0 !important; }
.dk-csimple__form .forminator-ui .forminator-has_error .forminator-input,
.dk-csimple__form .forminator-ui .forminator-has_error .forminator-textarea { border-color: #ff8a70 !important; }
.dk-csimple__form .forminator-ui .forminator-response-message {
	margin: 0 0 18px !important; padding: 14px 18px !important; border-radius: 14px !important;
	border: 1px solid var(--linea) !important; background: rgb(255 255 255 / .04) !important; color: var(--tiza) !important;
	box-shadow: none !important;
}
.dk-csimple__form .forminator-ui .forminator-response-message.forminator-success { border-color: rgb(127 224 166 / .5) !important; color: #b9f0cf !important; }
.dk-csimple__form .forminator-ui .forminator-response-message.forminator-error { border-color: rgb(255 138 112 / .5) !important; color: #ffc2b3 !important; }
.dk-csimple__form .forminator-ui .forminator-response-message p { color: inherit !important; margin: 0 !important; }

/* Si el contenido trae otra cosa además del formulario, que se lea bien. */
.dk-csimple__form > p { color: #cdc5bf; }
/* La caja del mensaje existe vacía desde el principio; sólo se ve cuando
   Forminator escribe algo en ella. */
.dk-csimple__form .forminator-ui .forminator-response-message:empty,
.dk-csimple__form .forminator-ui .forminator-response-message[aria-hidden="true"] { display: none !important; }